In one of my earlier articles on how to load Google fonts without a plugin, I received a request in the comments section, asking about the best way to have different fonts in the same WordPress post. Perhaps even just one sentence or one paragraph should be in a different font! The writer opined that it would be a great idea for landing page optimization.
Here’s a quick tutorial on how to achieve this.
Step 1: Make Sure the Font is Available
First, ensure that you have the font you’re looking for available for use by your site. You can refer to my above link on how to do this for Google fonts. Or if you decide to use local fonts that are already available by default, you can skip this step.
Just a quick note. With Google’s Core Web Vitals taking its place as a ranking signal, you need to speed things up as much as possible. This means:
I used to use Google fonts all the time, till I decided to just go with default fonts if possible. Less maintenance work for my site, and I don’t have to worry about loading additional resources.
Step 2: Assign a New Class to the Text you Want to Style
The new Gutenberg editor has an amazing feature. You can assign separate CSS classes to individual blocks. This is great for custom styling – such a thing would have been very messy in the classic WordPress editor. To assign a CSS class to your new text, select the block in the editor and expand the “Advanced” section on the right-hand pane as shown here:
In this example, I’m going to use my favorite Google font “Roboto” to style just a single paragraph. So, in the “Additional CSS class(es)” text field, I’ve used a class called “roboto-style”.
Incidentally, the “HTML Anchor” field is great for in-linking. Another thoughtful feature on Gutenberg!
Step 3: Use a Custom HTML Block to Insert the CSS
Gutenberg ships with a magnificently flexible block called “Custom HTML” that I use all the time. From JSON to JavaScript snippets, and custom styling, it’s a toolbox with unlimited functionality. We’re going to use it here to insert our paragraph styles.
So I choose the Custom HTML block and insert the following code:
<style>
.roboto-style {
font-family: 'Roboto Slab', serif;
}
</style>
Like this:
You’re done! Now just preview the post and you should see that the paragraph with the “roboto-style” class now shows a different font compared to the next paragraph below it:
If you want to use the same font on multiple paragraphs, just assign the same CSS class to wherever you want to display it. It’s simple!
Changing the Font on the Entire Post
If instead of just a few paragraphs, you want to change the font on a single WordPress post or page, just do the same things above, but CSS class and specify the “p” element instead. Like this:
<style>
p {
font-family: 'Roboto Slab', serif;
}
</style>
It’s that simple. Now all the paragraphs in the post will have the same font. I use this technique for styling a lot more than just paragraphs. I’ve had a lot of success using it for table styling (the default table styles in WordPress are pretty bad). But as you can see, it works perfectly fine for something as simple as changing the style of fonts!
I’m a NameHero team member, and an expert on WordPress and web hosting. I’ve been in this industry since 2008. I’ve also developed apps on Android and have written extensive tutorials on managing Linux servers. You can contact me on my website WP-Tweaks.com!
Leave a Reply