Change Font (Heading and Body)

[bentkieran]

Hi, may I ask how I can change fonts for headings and body?
I can’t seem to be able to choose from a list of fonts under customizer.

Thanks.

[prakash_s]

Hi @bentkieran,

Thanks for writing to us.

Please go to X -> Theme options -> Typography ->Body Font -> Change Body font from here. Then go to Heading -> Headings Font -> Change Headings font from here.

Have a look at screenshots too.
Heading Font

Body Font

Hope it helps you.
Thanks

[bentkieran]

Hi Prakash, yes that is what I did. However, there are no options to change the font beyond Inherit, Apple, Body Font, Heading Font in the dropdown menu, as seen from my screenshot.

Will you be able to advise?

Thanks.

[ruenel]

Hello @bentkieran,

That is because you have enabled the Font Manager.

Kindly disable it and you can see the different Google Fonts in the Headings Font option.

Hope this helps.

[bentkieran]

Oh I see. It is working now. Thank you so much!

[christian]

You’re welcome, @bentkieran.

[bentkieran]

Hi, can you tell me more about how to manage fonts throughout the entire website? I was able to choose a specific font for Header and Body in Theme options.

In individual pages, when editing with Cornerstone, should I be using ‘Inherit’ for the fonts to be the same? How will the system know if that font should be Header, or Body?

Or will it be easier if I use Font Manager?

What about regular pages that I create without Cornerstone e.g in Woocommerce pages? Will the fonts use my selection for Header and Body in Theme options?

Thank you.

[prakash_s]

Hi @bentkieran,

Please check our documentation to learn more about how fonts work on the theme

Font Manager | Themeco Docs

Typography | Themeco Docs

In Theme options -> Typography, you have to choose Header and Body font. Selected Header font renders for heading tags and for p and div tags Body fonts render. The system calls chosen fonts from the Typography.

If you use the Font manager you can choose multiple fonts in Elements. If you choose inherit it will render Font based on Tags and to assign any custom font at any element font manager is better.

In WooCommerce pages fonts render based on tags, for heading tags it will render the font chosen at Typography and for Paragraphs and container tags like div, it renders body font.

Thanks