Archived topic
CSS For Adding Local Font
1 reply · Started by Michelle on April 14, 2022
I have been following Leo's tutorial regarding how to install fonts locally. In the tutorial, he shows how to use the Google Font tool to start the process. The Google Font tool opens up when a Google Font is chosen. However, I am not using a Google Font. The tutorial shows that I am supposed to paste an edited font url into that tool to generate the needed CSS. Since I am using a custom font of my own, and the tool doesn't open, how do I generate the needed CSS?
Hi Michelle,
For none Google Font fonts, you would need to create your own @font-face rules.
Here is an article which may assist you: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
Also see: https://css-tricks.com/snippets/css/using-font-face-in-css/
There are also several tools online that do the @font-face generation (and webfont conversion) for you – like this one:: https://www.fontsquirrel.com/tools/webfont-generator
Hope this clarifies. :)
