[owenbParticipant]

Hi,

Love the theme 🙂 Working on a new version of my site, here’s where it lives: https://owenbillcliffe.co.uk/wpobp6/

I would like to change the font of one of the words in the top bar – I want the word ‘friendly’ to be in a friendly script-style font. I have inserted a ‘span class=…’ to the top bar text and set the font-family in the CSS for that class, and have confirmed it works, but the font I want to use isn’t used anywhere else on the site.

If I use a font that *is* used on the site then the span class works. If I use one that isn’t, for example Pacifico, it doesn’t. Presumably this is because setting a font in the Customizer adds the requisite code to the head that calls the font.

So, how would I add my own extra Google font to the site so that I can use it for this one word in the top bar? Hard code it into the head?

(At some point I do plan to create a child theme and copy over all my CSS additions and any hard-coded changes.)

[owenbParticipant]

Solved!

I installed the relevant child theme, then added some code to the functions.php that I found on the web. Works!

(Am experimenting with changing the font of the whole sentence, not just that one word, in case you stop by and wonder…)

[ZeshanMember]

Hey, glad to hear you were able to do it by yourself! Have a great day! 🙂

[Tim BParticipant]

Greetings Friend!

I would like to pick this one up because this is exactly what I want to do. I suspect others beginner users like me may appreciate help with this too.

So for me, I want to use a font different from the rest of site for one particular sentence. The different font is called “Indie Flower”. Indie flower is in the list of fonts available in the customizer but it is not set for the site. Custom fonts is enabled – if that makes any difference.

I thought I would be able to set Indie Flower using an inline style span (if that it correct) but I haven’t had any joy.

I got the font family characteristics for Indie Flower from google fonts as follows:

font-family: 'Indie Flower', cursive;

Google says to add the font source to the website using <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>.

But because the font is in the list offered in the customizer, I assumed that would not be required.

In text editor I tried to set the font as follows:

1. <span style="color: #ffffff; font-family: 'Indie Flower', cursive;"></span>; and then

2. <span style="color: #ffffff; font-family: 'Indie Flower';"></span>

Both spans changed the font type, but not to Indie Flower. In fact, they changed the font to two DIFFERENT font types. First was like a child-like script font and the second was some form of italicized serif font.

They both changed the font color fine. So the styling function is working.

I am thinking that I may need to specify the font by inserting the code google supplied – but am not sure where I should put it. I suspect the head because the relevant sentence will appear across most pages in the site, but I don’t know how.

I may also be way off base – which is not only possible but probable.

Can you offer us help on how to style particular text with another font like the Indie Flower font?

Thank you very much in advance.

[Nabeel AModerator]

Hi Tim,

Thanks for writing in!

Replace your code with this one:

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

Tested it on my local installation and it works.

Let us know how this goes!

[Tim BParticipant]

Hi friend!

Thank you for your response. Unfortunately, that still didn’t work for me. I get the same child-like font as before.

Punch Font? There is also a ” A Punch Font ” tool in the dashboard menu that looks like it is for adding fonts. That’s an X-theme tool, right? Should I be using that to add the specific font first?

Child Theme? I am using a current version of X, but with a child theme from an earlier version. Perhaps that font was added to X after my child theme. Will that make a difference? Here are my details in case this will help:
Theme: X – Child Theme: Integrity Light (Version 1.0.0)
URL to page I am working on: http://www.injurylawyerswa.com.au/workers-compensation/

Plugin? Alternately, could a plugin be affecting it? I note there are a number of plugins which I assume X-theme added because I didn’t – apart from the seo one. I know akismet comes standard.

Thank you for your help in advance.

[Tim BParticipant]

If you need to look a the url, I should add – the releveat line I am trialing the styling on is the second line in the banner reading “We’ll FIGHT for you.”.

[ZeshanMember]

Hi Tim,

Thank you for posting by!

Upon checking, the span tag in the revolution slider isn’t having font-family: 'Indie Flower', cursive !important; property in it. After adding it directly from the Google developer tools, I’m able to see the font just fine (see: http://prntscr.com/53woth). Would you mind confirming that you’ve added the above provided code correctly in the slider?

Regarding your other queries:

#1: “Punch Font?” this is the tool provided by Revolution Slider, you can use it to insert Google fonts in your website.

#2: No it shouldn’t make any issue.

#3: If you have added the font correctly and it’s not updating, it could be a plugin conflict but it will be more likely a caching issue. I’d recommend that you clear your caching plugin, and disable it during development. This can cause Customizer changes to not take place on the front end. It will eventually show up when the cache regenerates, but it’s not ideal if you’re looking to see your changes immediately. Caching plugins are best to turn on only when you’ve finished building the site.

Let us know how it goes.

Thank you.

[Author]

Posts