Archived topic
Custom fonts (not Google)
5 replies · Started by Ryan on March 24, 2022
I am following this tutorial.
https://docs.generatepress.com/article/adding-local-fonts/
In the beginning it says that this process will work for any kind of custom font files (not just Google).
However, I hit a snag.
After uploading my fonts locally to the Media Library, Leo says go back to Step 3 of the Google font helper. However, if you don't use Google fonts, there is no step 3.
So now I'm lost.
How do I complete this process from here?
Hi Ryan,
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. Feel free to reach out if further assistance would be needed. :)
Update:
I created my own font-face rules and pasted them into Simple CSS.
But when I go to the Customizer, the font doesn't show up.
Don't know what I'm doing wrong.
Hi there,
i assume you're using the Dynamic Typography option - it will look like the images in this doc:
https://docs.generatepress.com/article/dynamic-typography-overview/#font-manager
If so:
1. Add Font
2. In the Font Family field enter the exact font-family name you have in your @font-face CSS
3. DO NOT select Google Font if that option shows ( should only show if the name matches a google font ).
Once thats done and you Add Typography you will see your font in the list.
Thanks, David. That worked!
I might have a follow-up question, but getting closer...
No problems - keep the topic open as long as you need :)
