Docs

[blueoaks]

So I was able to add my first ever premium font and was mostly successful, following some other threads on this forum. I can see my new font on the front end. However they’re all very small. Like all my <h_> are super tiny. And there are now weird icons that weren’t there before in certain places.

I know I can add CSS to manually style them as 2em, 3em, etc, but I am wondering why I have to do that in the first place. I did not come across others with that issue so I am wondering if I did something wrong. I just want them to be em’s of the body font like the native <h> tags are. Is it because this custom font is not in the Customizer that the em relationships need to be set manually in css?

I’ll post my login in another message so you can look at my CSS (which I put in Customizer => Global CSS, not in style.css

Here is what I have to style them so far:

h1, h2, h3, h4, h5, h6 {
  font-family : 'Conv_Have Heart Two' !important;
}

Thx.

[blueoaks]

This reply has been marked as private.

[Nico]

Hi There,

There are default font-size according to the class where the header text is located and it is base on the default font-family used.

You could add custom CSS to adjust the header font size. Sample custom CSS for h4

h4, .h4 {
     font-size: 20px !important;
}

Add !important so that default font-size classes won’t change your custom font.

Hope it helps.

Thanks.

[Author]

Posts