- This topic has 8 replies, 2 voices, and was last updated 4 years, 8 months ago by
.
-
Posts
-
How do I use a Google Font on just several words on one page without affecting the entire site or entire page? I have spent at least 4+ hours researching trying to find an answer with no success. I know it must be possible but every article and plugin gives extensive instruction or code to change all fonts with, let’s say, h1, or quote, or paragraph across the theme. But I just want script on two words – the end.
Can anyone please help me?Lead Developer
Hi there,
I don’t suggest doing this, as you’ll add significant weight to your page just for a few words.
If you need to, I would:
1. Go to the Google Fonts website and build your list of required fonts. It will provide a
<link>element for you to add to the<head>of your website.2. Create a Hook Element: https://docs.generatepress.com/article/hooks-element-overview/
3. Set the hook to
wp_head4. Add your
<link> element Google provided.5. Set the Display Rules to your one page.
Now you need to go into your page, and edit the HTML of your specific words. You need to wrap those words in a custom class which you can apply the font to:
Here's an <span class="first-font">example</span> sentence with a <span class="second-font">couple</span> different fonts.Now we need to write the CSS so the font family is applied to those classes:
.first-font { font-family: Lato, sans-serif; } .second-font { font-family: Roboto, sans-serif; }Google should provide an example of the CSS you need to use for your specific fonts.
Hope this helps 🙂
Thanks Tom. Since that isn’t really the way to go, If I want one heading, like h3, in script font, how would you suggest I do it without affecting like every instance of h3 across the entire site but just on one page?
In that case, you would want to use the method I supplied above. Just be sure to only include the one variant you need (not all of them).
I’ll give it a go. What happened to the good old days when I could be on a page, highlight some text and choose another font from a dropdown? I’m just stunned this is so difficult. Surely people want to change font family on their web pages but maybe it’s just me. I will report back shortly.
thanksYes, this works. Thanks.
I will say that your support is AMAZING in terms of response time and thoroughness. I did have to figure a few things out, but thanks.I would like to know if there isn’t any easier way to change the font of some text on a page.
Thank you! Glad I could help.
If you’re using Gutenberg, maybe this plugin will help?: https://wordpress.org/plugins/olympus-google-fonts/
Ok, thanks – that seems a lot easier
No problem 🙂
- You must be logged in to reply to this topic.