[Support request] Custom fonts (not Google)

[Ryan]

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?

[Fernando]

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. 🙂

[Ryan]

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.

[David]

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.

[Ryan]

Thanks, David. That worked!

I might have a follow-up question, but getting closer…

[David]

No problems – keep the topic open as long as you need 🙂

[Author]

Posts