Adding a New Font
Learn to add and use new assets in Scandi
Last updated
Was this helpful?
Learn to add and use new assets in Scandi
Last updated
Was this helpful?
You can add fonts in the src directory. When you reference them with url in your style sheets, they will be resolved and bundled with your application. Let's go through an example.
Suppose you have decided to use the . Convert them into the Woff and Woff2 formats. Then, put them in the src/style/fonts directory. Any directory under src would work, but it makes sense to store them in their own directory along with styles. Verify that your fonts are where you expect:
However, they are still not imported in our styles. To actually include them into the page, create a new file, namedsrc/style/base/_font.scss, for example. First, we will need to declare the font faces:
For convenience, let's also define SCSS variables to refer to these fonts:
Now, we have told the browser that these fonts exist and where to find them. However, they aren't actually being used anywhere. Let's use the Staatliches font for headings, and the Source Sans font for everything else:
One final change is needed - to actually include the _font.scss file as part of the styles. We can do so by importing it in src/style/main.scss (override the file if you don't already have it in your code). In the last lines of main.scss, add:
Note: it is important that this import occurs after the import of base/_reset.scss, since, in the base theme, this is where the body font is set.
We can now refresh the page to see that the fonts have been updated:
Exercise: Try adding a new font and assigning it to some text! Be careful though - the more fonts you add, the less consistent the user interface looks. Besides, each additional font needs to be loaded into the browser.
