Font family and variants in headings

Hi Michele,

If the font family is the same, then the variants will be the same throughout the settings with that same family. That's because when the call is made to Google, we only call the one font family along with any necessary variants for it.

Then in each of your settings (H1, H2, H3), you would set the font weight to whatever you want that specific element to use (300, 700 etc..).

Does that make more sense?

Let me know :)

Oops, I used the wrong terms before. I understand that for each heading, one font family is chosen. Within that family, there are variants that can be loaded selectively to improve performance. I was expecting that those variants could then be chosen per heading or that the font weights would mirror the variants and allow the choice there.

For instance, Roboto offers all these variants:

• Thin
• Thin Italic
• Light
• Light Italic
• Regular
• Regular Italic
• Medium
• Medium Italic
• Bold
• Bold Italic
• Black
• Black Italic

But the font weights offers:

• 100
• 200
• 300
• 400
• 500
• 600
• 700
• 800
• 900
• normal
• bold

It's confusing that they don't match. What choices would I make in the Customizer if I wanted to set

H1 Regular
H2 Bold Italic

Thanks

Ah, I understand. I agree that the experience right now is somewhat confusing.

Variants were added well after the font weight option, which is why they're different. Switching it up now would likely be very difficult when it comes to backward compatibility.

This is something I'd like to address in a future version.

The font weights should still work the same, but we don't have an italic option currently. I can help with some CSS for that if you need.

Hi Tom,

I'm having the same issue. Can you help me out with the CSS?
I want to set it this way:
H1: Italic + Uppercase + Bold + Underlined
H2: Uppercase + Bold + Underlined
H3: Uppercase + Underlined
H4: Downcase
H5: Italic

Regards

Hi there,

Most of those are in the Customizer. Here's the stuff that isn't:

h1 {
    font-style: italic;
    text-decoration: underline;
}

h2 {
    text-decoration: underline;
}

h5 {
    font-style: italic;
}