How do I Change Custom Headline Font

Hi there,

I’m wanting to change to a font specific to a custom headline.
Looked through a lot of the available documentation and all seems pretty straight forward but I still can’t change font.

So, for example if I were wanting to use a google font in the font manager, say, Abril Fatface I’m placing

font-family: ‘Abril Fatface’, cursive;

on the style input box. Where am I going wrong?

Thanks in advance!
Jon

Hi there,

Please kindly go to X > Launch > Templates > Fonts and add a font to your headline.

Then go to X > Launch > Options > Typography and set the heading to the name you used on the font manager.

Then please turn the font manager option off. Save the settings and then turn it on again:

That should do the trick.

Thank you.

Hi there thanks so much for the reply. Sorry, not sure I explained properly.

I already have my headings font globally set to a chosen face but want to use different fonts on other custom headers throughout the site. Basically I’m needing to learn how to allocate any font I want to use to any custom header?

Thanks for your continued support.

Hello There,

In your custom headline element settings, if you are using Cornerstone in building your page, find the the style field and insert font-family: 'Abril Fatface', cursive;. This method will only work if the font ‘Abril Fatface’ is loaded in the page or being set in the Global Style option.

If you are using plain text in inserting your contents, then you use a code like this when applying to your custom header:

<h3 style="font-family: 'Abril Fatface', cursive;">This is my custom header title</h3>

Hope this helps. Kindly let us know.

Thanks so much for your reply @RueNel.

Still can’t get this to change - I’m obviously missing some very basic knowledge (I have very little experience web design)

When you say ‘load the page’ do you mean I have to grab the @import line of code for that font from the Google font site and place in my css? I assumed that it was already available as I can apply the font successfully globally in Theme Options > Typography

Many thanks for your help!

Hi There,

The Theme will only request the font that you did actually used (not just being assigned on the Template > Fonts). Did you use the said font (Abril Fatface) anywhere on your header or footer builder element? If not, then that font was not requested so you need to add the @import line to your child theme’s style.css file for it to be requested from Google.

Hope this shed some lights,
Cheers!

Awesome - all sorted. Thanks for your patience!

We’re delighted to assist you with this.

Cheers!