How to Change the Font Size in WordPress

Final product image
What You’ll Be Creating

Changing the font size in your WordPress site is something you can do quickly and easily for a small section of text, or something that can take a little more work if you want to do it for a larger section of text.

In this quick tutorial, I’ll show you how to change the font size in your WordPress site.

I’ll show you two quick methods:

  • changing the font size in an individual block
  • adding a CSS class to a block and then styling the class

I’ll also give you an introduction to changing the font size across your site, by editing your stylesheet.

If you want to learn how to add completely new fonts to WordPress, you can also learn how here.

  • WordPress
    How to Add New Fonts to WordPress
    Jessica Thornsby

How to Change the Font Size of a Text Block

Let’s start with the quickest method.

When you’re editing text in your WordPress posts, you can choose to make a block of text have a different font size from the other blocks on the page.

This can help to highlight a specific section of your page.

You should use this method with caution: too much will make your site look messy and unprofessional. And if you do it more than once, make sure you use the same font size for all the larger or smaller sections of text.

Start by finding the block of text whose font size you want to change.

paragraph block

On the right of the screen in the Block pane, open the Text Settings tab.

text settings tab

Here you can choose to make your text larger or smaller, or to specify an exact font size for it. I’ve boosted the font size to medium:

medium font size

You could boost it even more and make it huge, but beware of making your site look messy.

Alternatively, select a specific font size and make sure you use that for all your larger or smaller font blocks across your site.

Finally, click Update to update your post or Publish to publish it. That will save your changes.

How to Use a CSS Class to Change Font Size

If you want to make sure that all your larger text blocks are the same size and don’t want to have to remember the size you used, you can use a CSS class to assign a consistent font size to all elements with that class.

Find your text block again and in the Block pane, open the Advanced tab.

advanced tab

In the Additional CSS class(es) field, type in a CSS class. I’m gong to use text-large:

adding a CSS class to a block

Now click Update or Publish to save your post.

You now have two options for editing the size of blocks using that class:

  • Add styling in the Customizer
  • Add styling to your theme’s stylesheet

Styling the Class in the Customizer is the easiest way to do it, and won’t cause you any problems when you update your theme.

Go to Appearance > Customize in the WordPress admin and click Additional CSS.

customizer

In the Additional CSS pane, type in the following to make your text larger:

Using ems instead of a specific font size will make this text 1.2 times the size of a normal paragraph.

CSS in customizer

Click the Publish button to save your changes.

Now go to your post in your live site and you’ll see that your block with the text-large class is larger than the text around it:

larger text in front end of site

If you want to boost the size more, just edit the CSS in the customizer. Now whenever you want to make a block larger, you just give it that class and the font size will be changed for you.

Changing Font Size in Your Theme’s Stylesheet

The two methods I’ve shown you don’t need you to edit the files in your theme or to have an in-depth understanding of CSS. And they give you a quick way to change the font size in WordPress.

But if you want to edit the size of existing elements in your site (such as all paragraphs or lists), or you want to add CSS in the stylesheet instead of in the customizer, you’ll need to edit your theme’s stylesheet.

You can find out more about editing your stylesheet in our guide to adding custom CSS to your WordPress site. If you want to go into more depth, it’s a great place to start.

  • WordPress
    How to Add Custom CSS to Your WordPress Site
    Anna Monus

Conclusion

Changing the font size of text in your WordPress site can take minutes to do. You can either edit the font size of a block directly, or give it a class and then write CSS for your class.

Whichever method you do, use it sparingly for maximum effect and make you you don’t end up with a site that looks messy and unprofessional.

Make Your Site Beautiful With a Professional WordPress Theme

Are you in the process of giving your WordPress website a makeover? Our collection of professionally-designed WordPress themes can give your website an entirely new look and feel, within minutes. 

Here are a few of the best-selling and up-and-coming WordPress themes available on ThemeForest for 2020.

  • Inspiration
    23+ Best WordPress Portfolio Themes for Creatives
    Brenda Barron
  • WordPress Themes
    28+ Best Responsive WordPress Themes (For Sites in 2020)
    Brenda Barron
  • WordPress Themes
    25+ Best Coaching & Consulting WordPress Themes (2020)
    Brenda Barron