Archived topic
Selecting Google Fonts variants in the Customizer
8 replies · Started by NBC on September 16, 2018
I'm using a Google Font that includes 14 variants:
100, 100i, 200, 200i, 300, 300i, 400, 400i, 500, 500i, 600, 600i, 700, 700i
I want to set the site header in 200i, the body copy in 300, and h1, h2, hx in 300i.
If I choose 200i as the Font Family for the header, the entire site switches to it.
If I add 300 to the Font Family list, the entire site switches to it.
You get the picture.
The Variants menu knows nothing about italicized font files.
In desperation, I tried styling the header as font-style: italic, but that just obliques the type rather than using the italic style.
I've read virtually every post and doc on this, but it still isn't working.
I guess I can just build the header as a logo file, but this should work, shouldn't it?
[Edited to add: This is not one of the default 200 Google Fonts. I'm adding it through a Code Snippet, using the entire list of variants so I can work on the design without being limited.]
Hi there,
If I understand this correctly, Tom's answer here should address the problem:
https://generatepress.com/forums/topic/font-problem/#post-660084
Let me know if this helps :)
Hi, Leo!
No, that doesn't help. All that does is artificially oblique (i.e., slant) the type. It does not actually use the 200i typeface file, which contains significantly different letter forms.
Hi there,
Instead of trying to give each setting a different set of variants, load all of the necessary variants in one setting. GeneratePress will actually set them all the same for you.
This will include the necessary variants in the one call to Google that each font makes.
I realize that all the settings use the same set of variants. But how do I access the 200i variant with a "font-style: italic" setting for the heading (in a child theme)?
All I get is an obliqued rendition of the 200 variant.
If 200i exists within the variants being returned, then setting a font to italic will automatically use that variant:
h2 {
font-style: italic;
font-weight: 200;
}Thank you, Tom!
Onward and upward.
As always, GP rocks!
I will say that I wish the Customizer allowed for the assignment of different variants to different settings.
I'll definitely look into that :)
