[Resolved] How to handle local font variants

[Han]

Hi support,
I have been reading up on using google fonts locally with GeneratePress as this seems a good idea. I read the instructions here:
https://docs.generatepress.com/article/adding-local-fonts/

That is all clear for adding just ONE regular font. I would like to know how that works if you have a few different weights and italic variants of the same Open Sans font. For instance, if I make a text bold the browser makes the regular weight of 400 show up bold. But that is ugly.

I need the site show show the bold variant of the font. But it’s not clear to me how to make that work with GeneratePress.
Can you point me in the right direction?

thank you,

Han

[Ying]

Hi there,

When you are at the downloading font step, you can select multiple font weights.
https://docs.generatepress.com/article/adding-local-fonts/#downloading-our-font

[Han]

Hi Ying,
Yes I understand that. That is not my question. I can upload multiple font weights.

But in the example CSS there is only a reference to font weight 400. So if I do not do anything else only the regular font weight 400 is used. So, if I follow the example I would have to add all of them as a seperate font, like Opens Sans 400, Open Sans 400 italic, Open Sans 700, Open Sans 700 italic

That is no good for the normal text in the site as that get’s complicated for editors. I want to be able to add the Open Sans font as a family. Just like you can when you use the Google online font not locally.

So my question is. How can I set it up so that a font family can be used in GeneratePress. What should I do to make it use the weights and variants of one font family.

[Ying]

If you download all of the font weights and add all the @font-face CSS that the tool generated, then you should be able to add the font at customizer > typography > font manager.

When the Google font toggle is on, you can edit the Variants of the font.
https://www.screencast.com/t/R3AHUbflpG

Then un-toggle the Google font option to make sure it loads the local font.

You will be able to see the font variants when you choose the font at the typography manager:
https://www.screencast.com/t/H0LFY4aJWW33

[Han]

Hi Ying,

thank you for your explanation. That should do it I guess. I am going to give that a try.

Hi, Han

[Ying]

Let me know how it goes 🙂

[Han]

Hi Ying,

I have the fonts working locally now. Very nice.

thanks a lot,

Han

[Ying]

Glad to hear that 🙂

[Author]

Posts