How to change font in header and body

[aliceng]

Hi,
I can’t figure out how to change font - H1, H2, H3, text etc.
I went to Typography but I can’t figure out how to use it.
Thanks

[paul.r]

Hi,

The headings font-size by default are set to percentage which is based on your body font size.

For example h1 is set to 400% so if your body font size is 10px, h1 400% equevalent will be 40px.

We made it like this so it is mobile responsive but if you need to change this you will have to override it using Custom CSS

You can add the code below in Theme Options > CSS

h1,
.h1 {
    font-size: 400%;
}

h2,
.h2 {
    font-size: 285.7%;
}

h3,
.h3 {
    font-size: 228.5%;
}

h4,
.h4 {
    font-size: 171.4%
}

h5,
.h5 {
    font-size: 150%
}

h6,
.h6 {
    font-size: 100%;
}

Change the font-size as you like.

Thanks

[aliceng]

Thanks.
I want to know how to change the font size, font color, font family not using CSS?
Does the theme let me pick the font face, color etc ?
Thanks
Alice

[Prasant]

Hello Alice,

Thanks for asking.

I see that you are using Pro Theme. I also checked the website that’s attached to your licence and can see that you are not using Pro Theme header and footer builder. With header and footer builder you get the flexibility to customize font size, color and other typographic styling for every element. When not using header and footer builder, you will have to use couple of custom CSS to make the necessary changes. Reason being for few sections, especially header and footer styling has been hard coded onto theme files. To override those values you need to use custom CSS. Please try out header and footer builder and see let us know how it goes.

Thanks.

[aliceng]

I’m new to the theme. I want to know how to switch to Pro theme header and footer builder? Is there any video tutorial that I can learn from? I also want to know how to change body font size, color etc.

[friech]

Hi Alice,

Sorry for the confusions, please start from this article (Pro - Header and Footer Builder Introduction) to have an idea how the Header and Footer builder works.

Then the following article on how you can manage and use font-family and color across the builders (Header, Content, Footer)

Font Manager
Color Manager

See the other Knowledge Base articles here, and feel free to create a thread if you find something confusing about the theme or the builder and we will be happy to assist you.

Cheers!

[aliceng]

Hi,

Thanks for the link.
I still don’t understand how can I control the H1, H2, H3 and text font.

I went to font manager, change the font to Chelsea Market then “save”. I don’t see any font change in my website.
On this page, I delete the html code of the text, but nothing change after I change font in the font manager.
http://2018.tngva.com/academic-institutions/

I want to set the H1, H2, text font size globally so I don’t need to code them every page. Thanks

Alice

[Prasant]

Hello @aliceng,

Thanks for updating the thread.

If you want to change the font size of heading globally, then you need to use custom CSS as suggested in first reply. You do get the option to change heading font size at element level, but for that you need to make the changes at a particular element.

Regarding font manager, after creating the font template you need to go to the element and select the font template you just created to reflect the changes. Let’s say you want to change body font, after creating the font template please navigate under Pro > Theme Options > Typography > Body Font.

Thanks.