[Support request] Header font weight not working

[Michael]

I am trying to get the font weight for my Header to 100 but it is not changing what so ever,

This is what I’ve tried:

.hero-heading {
font-family: ‘Playfair Display’;
font-size: 3em;
font-weight: 100;
}

and in the customizer it only shows regular, 700, italic, etc.

Actually, now that I look at it, I don’t think it’s even showing up as Playfair, but Serif instead.

[Michael]

Just incase anyone is wondering, this has not been resolved, and the topic just a few hours before mine does not resolve it as well.

[David]

Hi there,

Playfair Display doesn’t have a 100 weight – only Regular (400), 700, Bold (900) and the italic variants.

[Michael]

Hello,

Check the font on my regular site https://www.solelylove.com/ of the Solely Love Films, it has the font weight 100 so it is possible, how can I achieve this?

[David]

Fonts will grab the closet available size, so if you changed that font to 200, 300, 400 or 500 they would all use the Regular size and look identical. If you change it to 600 it will jump to 700 as this is the closest match.

[Michael]

So how do I get a 100 font weight for my Playfair Display font? It’s pretty much imperative to the style.

[David]

On your static site the Font it is actually using is the Regular (400) weight font. So you can leave the font as Regular in the customizer or set it in your CSS as 100, 200, 300, 400 or even 500 – and it will look the same as your static site.

[Michael]

I’ve done that but it still appears thick

[David]

So i edited the CSS in browser dev tools, changed the font to Playfair Display and set it to 400 weight this is the result:

[Author]

Posts