Is it necessary to add the font in CSS as well?

[flowen]

hi,

Thanks first of all for adding this!

After importing the npm package, do I still need to add a font-face style to my css?

Reason why I'm asking is because then webpack will report errors it can't find the font.
Perhaps I just need to understand the correct path towards the font file.

// causing the error:
@font-face {
    font-family: 'source sans';
    src: url('SourceSansVariable.woff2') format('woff2-variations'),
      url('SourceSans-bold.woff2') format('woff2');
    font-weight: 200 700;
    font-style: normal;
  }

[flowen]

I've now pointed the url towards the npm package/files/font-name, like so:

src: url('~/typeface-source-sans-variable/files/SourceSansVariable-Roman.otf.woff2')
        format('woff2-variations'),
      url('~/typeface-source-sans-variable/files/SourceSansVariable-Roman.otf.woff') format('woff');

In the network tab I can see it loaded the font (before it did not), but there's no sign of it in my browser.

Any assistance would be greatly appreciated

[grubersjoe]

Normally all you need to do are two things. Import the package in JS like this:

import "typeface-source-sans-variable";

Use the font inside your CSS afterwards:

body {
  font-family: "Source Sans Variable", serif;
}

There should be no need to add @font-face rules in your own CSS as long as Webpack is correctly configured to load CSS and font files. I've tried the current version of this package with Create React App and it works there.

So I think your Webpack config probably lacks either a CSS loader or more likely a file loader (for the font files). It is important that Webpack is configured correctly, so that the font files will be output to the build directory, when creating a production build. Did you create the Webpack config yourself?

See this article for more info: https://chriscourses.com/blog/loading-fonts-webpack

[flowen]

ahh thanks Chris, that explained. I got it working now!

[grubersjoe]

Nice! Glad that it helped!