• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
NameHero Blog

NameHero Blog

Web Hosting Tips & Resources From NameHero

  • Hosting
    • Web Hosting
    • VPS Hosting
    • WordPress Hosting
    • WooCommerce Hosting
  • Reseller
  • Enterprise
  • Domains
  • Account
  • Blog Home
  • Categories

How To Change The Font Of Just ONE Sentence In WordPress

Bhagwad Park

Published on: April 28, 2021

Categories: WordPress 0

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:

  1. Making fonts non-render blocking
  2. Loading fonts locally

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:

Assign a Class to a Block in WordPress Gutenberg
Assign a Class to a Block in WordPress Gutenberg

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:

Insert the CSS for the New Font
Insert the CSS for the New Font

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:

Separate Font for a Single Sentence in WordPress

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!

Bhagwad Park Profile Picture
Bhagwad Park

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!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow & Subscribe

Exclusive promos, content and more!

Most Popular Posts

Speed up your site: solving the WordPress slowdown

NameHero’s Recommended WordPress Plugin and Theme Setup (2023)

How To Increase The InnoDB Buffer Pool Size

How To Fix A Stuck All-in-One WP Migration Import

How To Add A Subdomain In Cloudflare

Top Categories

  • WordPress
  • Website Performance
  • Web Hosting
  • Resellers
  • Website Development
  • Website Security
  • VPS Hosting
  • SEO Tips
  • Announcements
  • Domain Registration
NameHero

NameHero proudly provides web hosting to over 40,000 customers with 99.9% uptime to over 750,000 websites.

  • Master Card
  • Visa
  • American Express
  • Discover
  • Paypal
Products
  • Web Hosting
  • VPS Hosting
  • WordPress Hosting
  • WooCommerce Hosting
  • Reseller Hosting
  • Enterprise Hosting
  • Domains
Help & Support
  • NameHero Blog
  • Knowledgebase
  • Announcements
  • Affiliates
Company
  • About Us
  • Contact Sales
  • Reviews
  • Uptime
  • We're Hiring

Copyright © 2023 NameHero, LLC. All rights reserved.

  • Privacy Policy
  • Terms of Use
  • Acceptable Use Policy
  • Payment Policy
  • DMCA