Custom font for brand name. Not rendering on front end?

[TristanP]

Hi there!

I have set up the font manager to load “Oswald” for the brandname.

Unfortunately, it stopped rendering on the front end. I have gone through many posts, but have not been able to figure out what’s going on.

I will share screenshots and login details in a private post below.

[tristup]

Hi Tristan,

The given URL is a single post and the post title is added with the span tag and the class which loads the Oswald font. I have created a test page and used the brand name font for the Headline elements and it works perfectly.

Thanks

[TristanP]

Thanks,

Yes, sure, I understand that if I want the entire headline, or body text to use that font, i could do it that way. But the issue is i want just the brand name to use that particular font, all the text surrounding it to use the font assigned to the element it sits in.

So I am trying to figure out how to use a different font just for a single word inside a line of text. Like so

'This would be the text in a regular font assigned, but THIS would be a completely different font. ’

If i do that via <span style=’ font-family:‘Oswald;’>this should be a different font or via this should be in the Oswald font and this text in the regular body font…, then the text inside the span does not render in the Oswald font.

[marc_a]

Hi Tristan,

I just check your issue and confirm it. It is just working properly on the backend but it doesn’t display properly on the front-end. Maybe there’s a plugin that conflicts with your font, I suggest that you disable all your plugins and let see if it solve your issue.

Hope that helps and let us know how it goes.

Thank you.

[TristanP]

Hi there. I have disabled everything, cleared caches.

Still not rendering as expected. To be specific: It does render correctly in the backend when viewed / edited through cornerstone, but not on the front-end

[ruenel]

Hello Tristan,

Just be advised that once you create a font “brandname” in the font manager, do not expect to use .brandname as a class because that is NOT how the fonts and the font manager works.

By the way, when I check your test page, I am seeing that the font is rendered properly.
See the secure note.

Best Regards.

[TristanP]

Yes, I am aware of that. Which is why i assign the font via a css class using font-family:‘Oswald’.

The problem clearly still persists and I have amended the test page you created to make this more obvious.

This is what the page looks like in Cornerstone:

And this is what it looks like in the front end (all plugins disabled, no caching) where you can clearly see it’s not the Oswald font, which is narrower. It is just showing as bolded text:

[ruenel]

Hello Tristan,

The screenshot is now in the secure note.

Please check my example links in the secure note below.

When using a text or a headline element, you will have to assign the font “brandname” and then select the font weigth.

I am just not sure why you are saying that is not working. Clearly, from our test and in the live view of the page, the font “brandname” which is “Oswald” with a 700 font-weight is working on our browsers.

Best Regards.

[TristanP]

Thans @ruenel.

Yes, but there are two issues still. I don’t nee the entire text element to be in the Oswald font, but just one specific word within that text.

And also, it should be on a post, not just pages. For same reason, that doesn’t work.

There, the ‘Oswald’ font simply shows up as the body font in bold.

I will share the url of an example post in the secure note, so you can see for yourself. Please not all caching and plugins are still disabled.

Thanks

[ruenel]

Hello Tristan,

One thing to keep in mind: Even if you already added a custom font in the Font Manager, if you do not assign that font to the element via the element settings Text Format option, the font will NOT be loaded on the page.

I can see that you are using a custom class. Before you can use Oswald font, you need to load it first to your site.
To do that, you will have to use this:

@import url('https://fonts.googleapis.com/css2?family=Oswald&display=swap');

.otherfont {
   font-family: 'Oswald', sans-serif;
}

If you go to Google Fonts, this is the instruction on how you can use the font in your custom CSS:

Hope this makes sense.

[TristanP]

@ruenel

.otherfont {
   font-family: 'Oswald', sans-serif;
}

Hi @ruenel thanks. Yes, I was already starting to think importing or enqueueing could be the solution.

So I went a head and took the import statement from Google Fonts. I added a few more weights, so mine now looks like so:
@import url(‘https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;700&display=swap’);

Added that to the Custom CSS.

The weird thing is that it is still happening. I see Oswald in Cornerstone. But still not on the front end.

I even restarted the webserver to ensure there is no weird caching going on.

See attached screen shots (secure note). It is easy to see that it is rendered correctly with Pro in the backend, but not in the front end. Examining the page shows via inspection shows that the css is correct.

[TristanP]

Solved!

It didn’t work at first, so I have now also tried enqueueing the font via functions.php and that does the trick.

Thanks!

[marc_a]

Hi Tristan,

We’re glad that you’re able solved your issue. If you have any other concerns regarding our theme features, feel free to reach us.

Thank you.