Fonts not showing according to what is set in custommizer

[minyona]

I set my fonts in customizer but now they are not being picked up by new page builder.

This page:

Summary

https://belcarahealth.com/plastic-surgery/body/tummy-tuck/

[rad]

Hi there,

Thanks for posting in.

Even if you set a font and that element happens to have local font styling, then it will not work. Just consider those font setting as base setting and each element could have their own.

Let’s override those local styling by adding this CSS to your global custom CSS.

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Playfair Display" !important;
}

Thanks.

[minyona]

So, when I add a headline with the new page builder, I have to specify a font?

How do I do that without added the CSS globally?

Do I then have to add the CSS on that page?

Or is there a way to specify font for an element within the controls for that element and I’m just not seeing it?

[christian]

Hi @minyona,

Sorry for the confusion. You do not need to use custom CSS because Playfair Display is a Google Font which you can select in the Typography setting. The reason it’s not picked because you’re not using the Font Manager. The V2 elements uses the Font Manager. I’ll explain further below.

Right now, the V2 Headline element needs to be setup each time because there’s currently no Template Manager. Once a Template Manager is available, it is possible to save a preset of it so you don’t have to manually setup each time. Please see our news regarding the Template Manager.

For now, you should use the Classic Headline element because it follows the Headline Typography setting out of the box. With this setup you can’t set specific font-size but you can use the Looks Like option which is an advantage if you’re looking for a uniform size.

To show you what I mean, please see this screen recording (please forgive the lack of audio).

@minyona

Or is there a way to specify font for an element within the controls for that element and I’m just not seeing it?

As you see in the recording, the V2 Headline gets or can get its Font Family setting from the list of Font Templates. It’s unlike the Classic Headline (also applies to regular headlines in your site) where it gets the Headline Typography setting in the Theme Options only.

@kory, one of our lead developers also has a great explanation about the how fonts work in X and Pro.

Hope that explains it.