Google font not loading on content pages

I have a third font that I’m using in a header widget, called from css. The font loads correctly on the home page, but doesn’t load on the content pages. https://www.gs-interiordesign.com. Please advise.

Hi @sleinen,

Thank you for writing in, can you clarify how did you integrate your third font? I don’t see your site loading a font from a custom CSS (@font-face), what I only see is the fonts from Google Fonts and the FontAwesome from Cornerstone.

I also, check the custom CSS that has on your homepage, and I don’t see anything related to font-family in there besides the font-size

Please audit how did you define your third custom font.

I would strongly advise that you utilize the Font Manager for adding your custom font.

You can provide us login credentials in a secure note so we can take a closer look.

Cheers!

thanks for your quick reply.
I am calling this font with css in “Customize”
#text-2 h3{
font-family:Pinyon Script !important;
text-transform: none;
letter-spacing:0px;
font-size: 2.4em !important;
line-height: .9em;
margin: 30px 0 0;
}
I added the font through font manager, but I don’t know how to call that font from css, or to use it in a widget.

Hi @sleinen,

Thank you for the clarification, I see you’re using the Classic Elements, that is why you don’t have the font-family option. Unlike the V2 elements, it has the font-family option.

So here’s what you need to do now, add this class to your Theme Options > CSS

.class-pinyon-font {
	font-family: "Pinyon Script" !important;
}

And then apply that class-pinyon-font to your classic text elements that you want to be on Pinyon Script font .

We strongly advise that you use the V2 elements moving forward.

Hope it helps,
Cheers!

Thanks for your response. I followed your instructions as much as possible. In your screen shots, you are showing cornerstone modules, but the widget I’m using in the header is a WordPress widget. I switched it from a text widget to an html widget so that I could use the class for the h3 that is the problem, but I am having the same results. Please advise. If there is a way to use a cornerstone element in this widget, please let me know.

Hi @sleinen,

You can apply a class to a hardcoded element like the following.

<h3 class="class-pinyon-font">Genoveve Serge</h3>
<p class="class-pinyon-font">INTERIOR DESIGN</p>

I see you added the class on the <div> container and used the .class-pinyon-font h3 selector, that works fine too.

Cheers!

It is still not working. The font is showing up the home page, but not on any of the content pages. Please advise.

Hi @sleinen,

I see why that is happening, that is because it was the Slider that is responsible for loading the font “Pinyon Script”, and because you don’t have that slider on other pages the font “Pinyon Script” won’t be loaded.

To resolve this, please navigate to Theme Options > Header > Logo Font and select the “pinyon” this pinyon option is the “Pinyon Script” you set on the Font Manager. This will ensure the “Pinyon Script” will be loaded throughout your pages.

Remember to clear all your caching features (plugin, server-side, CDN, and browser’s cache)

Cheers!

Great - this is all working now. Thank you for your help.

@sleinen,

It’s our pleasure to help you.

Thank you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.