[Support request] Local Fonts Variants

[Sonja]

I have read your Adding Local Fonts docs, because i want to host them local.

But how did i know, which variants (styles) to choose to download?

[David]

Hi there,

its you’re choice, you can download all the variants if you wanted but its better to just select the ones you are going to use. Worth designing out your style guide first and deciding on font weights and styles before doing so.

[Sonja]

So I can look in customizer too see which styles are used for H1, H2, H3, … and body text. Or are there other places, where these styled are specified?

[David]

Customiser is the place to look, you will see a font’s variants e.g 300, 500 shown as tags in the variants field and within the drop down. So if you load them all they should all be available.

With the Google Fonts you can deselect the variants you dont want to load with that font by clicking the little x beside them.

[Sonja]

Ok, thanks. What will happen, if I load them all? Does this slow down the site? Because you never know which style you want to use in the future.

[David]

All the variants do get loaded, so the more you have the larger their combined file size, so yes this can slow things down. Test it out and if its noticeable than you can always remove the ones you don’t need 🙂

[Sonja]

So, now I wanted to do this. I use the font Roboto on the site.

When i look into the customizer, I see that the main navigation have a variant 400. The rest seems to be normal.

So I must download the regular and the 400 variant, right?

But in the google webfonts helper, there is no 400 to choose in Roboto Font. They only have 100, 300, 500, 700 and 900.

What to do in such a case?

Where does the 400 variant come from in Generatepress? I don´t think I set this manualy.

[David]

Aah ok, the drop down shows the full range of font weights regardless of whether that style is available or not – its just a default list not dynamic as that would slow the customiser down. You can see in the font variants box exactly what weights area available, so you should only select from them.

So probably best to test the 300 or 500 weights for Roboto and see what suits your requirements.

[Sonja]

Okay. But what I don´t understand ist the fact, that chrome developer tool shows roboto with font-weight 400 on all areas. Also on body text, altough in customizer it shows “normal”. How can that be?

And how is this possible, when there is no 400 variant in google fonts?

[David]

Aah, apologies 400 is the normal font weight for Roboto, so it is the base font not a variant.

[Sonja]

Ah, okay, that makes sense then. So if i download the regular in google-webfonts-helper, then it is 400.
And if i only see 400 in customizer, then i only have to download the regular style. Right?

[David]

Yes, that is correct.

[Author]

Posts