What should I do to use a specific font in my web app?

Question

I am writing a Web App that should run either from the cloud and from an isolated LAN (eg without Internet access).

I am quite new to JavaScript and Webpack, but as I figured out I need to provide the source of OpenSans in different formats:

• open-sans-light.ttf
• open-sans-light.eot
• open-sans-light.woff
• open-sans-light.woff2

I managed to download OpenSans from https://fonts.google.com (only the ttf version though).

Then I put this in _font.scss

@font-face {
  font-family: 'OpenSans Light';
  src: url('../fonts/open-sans-bold-light.eot');
  src: url('../fonts/open-sans-bold-light.eot') format('embedded-opentype'),
  url('../fonts/open-sans-bold-light.woff2') format('woff2'),
  url('../fonts/open-sans-bold-light.woff') format('woff'),
  url('../fonts/open-sans-bold-light.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

Is this the correct way to do?

Answer 1

Make sure the path for fonts it correct and use font-family: 'OpenSans Light'; on elements you want to have that font and you are good to go.