[Resolved] Custom Fonts for Headers

[Monika]

I would like to use a custom font that I have on my computer (ttf type). It’s not a google font. How can I use this with Generate Press. Or do I need to install one of the plug ins? Thx. M.

[Fernando]

Hi Monika,

There’s no need for a third party plugin to add custom fonts. Here’s an article which should guide you with regards to this: https://docs.generatepress.com/article/adding-local-fonts/

Hope this helps!

[Monika]

Hi Fernando, Thanks, I think I can figure this out. But how do get the right CSS if it’s not a google font where I can use the font helper tool mentioned in the article? M.

[Fernando]

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

[Monika]

Thanks! Do I need to convert my ttf font into a webfont?
And a question about Google fonts – several Google fonts are listed in the drop down menu in the customizer. Is there a problem to just choose one of them from the list, or is it better to local host one? And why are there only some Google fonts in this drop down menu and not all?

[Ying]

Hi Monika,

Here’s an article introducing all kinds of font types, it should help to decide whether need to convert the TTF font type:
https://css-tricks.com/understanding-web-fonts-getting/

Is there a problem to just choose one of them from the list

No, it’s not a problem.

or is it better to local host one?

You can, but if you only need 1 font with only a few variants, the impact on performance is limited, I don’t think it has to be locally hosted.

And why are there only some Google fonts in this drop down menu and not all?

Because the space is limited, and Google fonts are updating as well.
You can type in the Google font you want to use directly, you don’t have to choose one from the dropdown list.

[Monika]

Thank you!

[Ying]

No problem 🙂

[Author]

Posts