Change the font of one word

I am trying to change just one word in a subheadline (which is in H2) so that it is a different font. I found this thread https://theme.co/apex/forums/topic/how-can-i-add-another-google-font-to-a-span/ that seemed to be asking the same question and I tried the solution suggested and while I could get the sample text to show on the screen using this code
Sample Text
When I changed ‘Indie Flower’ to ‘courgette’ (my preferred font for the single word) the text did not change font. Any ideas where I am going wrong?

Hi There,

Thanks for asking!

Heading elements are not supported HTML tag. Please use text element instead.
Do Same trick as you have done in sub heading tag.

Hope this helps!

Im sorry Basanta, I’m really not sure what your advice was. Could you try explaining it differently or in a little more detail please?

Hi again,

You can use text element for your heading instead of Headline element and then add the following code in there:

<h2 class="h-custom-headline h2">Sample <span style="color: #fff; font-family: 'Indie Flower', cursive !important;">Text</span></h2>

This way you can customize it the way you want.

Hope this helps!

Thanks for the speedy reply. I was already doing exactly what you recommended. As I said, I can add the sample text but when I change the name of the google font to something like “courgette” font for example, nothing changes. the sample text stays the same and doesnt change

Hello @hypnorich,

Thanks for updating the thread.

In one of the pages I added the code and made the necessary changes in the font family and changes are getting reflected fine. Please see screencast.

Please follow the steps shown in the screencast and see how it goes. Please make sure to clear cache.

Thanks.

Thanks for the video, I do appreciate a more visual guide in solving problems!
That being said, I still have a problem. It appears in the video that when you change the word “text” the only thing that changes is the colour. The font doesn’t seem to change. When I do the process you demonstrated I can change the colour of the font and the font does change but it looks like comic sans but I put in ‘courgette’ which is a much more cursive font but this doesn’t appear. When I change the font styling to something else it stays as comic sans. I have cleared the cache but no joy

Hi Joy,

You need to add the font first before you can use it.

Try adding the code below in Appearance > Customize > Additional CSS

@import url('https://fonts.googleapis.com/css?family=Courgette');

You can also add it through the font manager. Kindly refer to the link below.

Hope that helps.

AH! I read on a different supprt post for someone asking about google fonts and they were told that it wasn’t needed to do that because it was already added to x or something like that! Maybe I got the wrong end of the stick.

I have done the change you said and through the font manager added Courgette but I am still getting the same problem as you can see in the video

Hey Richard,

Setting up a font in the Font Manager won’t add or load the font to the page. You need to follow what @paul.r said previously which is to load the font using CSS import. I’d recommend not adding to to Appearance > Customize > Additional CSS unless you wanna load your font site wide. Please note that fonts add up to your page load so if you want your page to load fast, it’s not good to load a font just for a single text.

If you wish to continue with the setup anyway, please see this screencast.

Additionally, you can load a font by actually using it in your content. See https://youtu.be/uyUXAO3rB90

Hope that helps.

Can you see my confusion when I was told:
“You need to add the font first before you can use it.” and "You can also add it through the font manager. "

Thanks though for sticking with me and explaining more. Now advanced mode is active it has made all the difference and the problem is now fixed. Thanks

Glad you were able to resolve it :slight_smile:

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