While Google Fonts and other resources can broaden font selection, you may wish to use an entirely different font or abstain from using a font from an external service.
We can modify our @font-face rule to use local font files as well. We can supply the user with the desired font family and host it along with our site instead of depending on a different site.
Here, you’ll notice:
The main difference is the use of a relative filepath instead of a web URL.
We add a format for each file to specify which font to use. Different browsers support different font types, so providing multiple font file options will support more browsers.
As of now .woff2 appears to be the way of the future, due to greatly reduced file sizes and improved performance, but many browsers still don’t support it. There are lots of great sources to find fonts to use locally, such as Font Squirrel.
Instructions
In the fonts/ directory, you’ll notice that we have added several local font files.
Let’s change the typography of the banner, using local font files. If you open up the fonts/ directory using the file navigator in the code editor, you’ll notice that we have added local font files Glegoo-Regular.ttf and Glegoo-Bold.ttf.
At the top of style.css, create a selector using the @font-face property and give it the font family Glegoo.
Within the @font-face rule, add a src attribute with the relative path of the file Glegoo-Regular.ttf and a format of truetype. Make sure to include this path in the url() parentheses.
Using the selector that targets the paragraph nested within the banner class, add the font family Glegoo and a font size of 20px.
Reload the page to see the changes in the browser.