How to Change Font Size in WordPress: The Right Way & The Wrong Way

  • Updated:
  • Reading Time: ~8 minutes
How to Change Font Size in WordPress

Trying to figure out how to change the font size on your WordPress site? We’ve got everything you need in this WordPress font size guide:

  • 4 methods we recommend
  • 2 methods we don’t recommend
  • Plenty of examples for specific scenarios

No need to feel overwhelmed at the thought of adjusting your font size. Follow along as we help you find the best solutions, or feel free to jump right to a method below for step-by-step instructions & examples.

The Best Ways to Change Font Size in WordPress

Bad Methods for Changing Font Size in WordPress

How to Change Font Size in your WordPress Theme

One of the first places you should check for the ability to change your font size in WordPress is right within your theme. Some themes provide this flexibility; others do not.

Change font size in WordPress theme with Customizer
Some WordPress themes support font size in the Customizer

You should check here first because:

  • it’s often the easiest
  • you can preview new font sizes before making them live
  • no coding involved

If your WordPress theme supports custom font sizes, you’ll find them in the Customizer.

  1. Navigate to Appearance > Customize
  2. Look for “Fonts,” “Typography,” or something similar (this will differ from theme to theme)
  3. Update the font sizes you want to change
  4. Use the live preview on the right to test your changes
  5. Click the Publish button when you’re finished

There is another way to change the font size in your WordPress theme, but it requires a little coding. Continue reading the next section.

How to Change Font Size in WordPress with CSS

Using a little bit of CSS to change your font size in WordPress is usually the best option. It does require some CSS knowledge, but is generally not all that difficult. You’ll also benefit from consistency across your entire site, as well as the flexibility to change font size wherever & however you want.

CSS in style.css File

The best way to change font size in WordPress is by using CSS code in your style.css file. However, you should never make changes directly to your theme’s files. It’s a best practice to create a child theme and make updates there.

See WordPress’ documentation on child themes »

Once you’ve created a child theme, open up the style.css file. There are several ways in which you can change the font size:

  • change the font size of your entire site (affecting all elements)
  • change the font size of specific elements (p, h2, li, blockquote, etc.)
  • change the font size for specific screen sizes

Let’s take a look at some examples using each method.

Change the font size of your entire WordPress site

Most WordPress themes set a default font size on the <body> element. If you want to make the font size of all elements on your site larger or smaller, your code would look like this:

body {
	font-size: 1.25rem;
}

You can set the “1.25rem” to be anything you’d like.

Change the font size of specific elements

Let’s say you just wanted to change the font size of all paragraph tags (p). Paragraph tags are used for most of your general post content.

p {
	font-size: 20px;
}

Or you want to make all heading tags (h2, h3, h4) the same size:

h2, h3, h4 {
	font-size: 1.5em;
}

You can use this method for any element on your site. You can also get more specific and change the font size only in certain areas of your site.

Change the font size for all list items (li) in your sidebar. This assumes your theme is using a class of “sidebar:”

.sidebar li {
	font-size: 16px;
}

If you wanted to increase the font size of all elements inside your footer, you could do something like this:

.footer {
	font-size: 110%;
}

The class names that you use could be different, depending on which WordPress theme you are using. If you’re unsure how to figure out what class names to use, include a link to your site in the comments and I’ll try to help you out.

Change the font size for specific screen sizes

You can also use media queries to adjust the font size for certain screens. You could start with a global size of 18px for the smallest screens, and once you hit screens that are at least 900px wide, adjust the global font size to 20px.

html {
	font-size: 18px;
}
@media (min-width: 900px) {
	html {
		font-size: 20px;
	}
}

Additional CSS in the Customizer

If you don’t have access to your style.css file, you can add the same rules to the Additional CSS area in the Customizer.

  1. Login to your WordPress admin area
  2. Navigate to Appearance > Customize
  3. Click on Additional CSS
  4. Enter your CSS rules (examples mentioned above)
  5. Preview your font changes in the preview area to the right
  6. Click Publish to make your changes live

A Note About Font Size: px, rem, em or %

You might have noticed I used a variety of font size values in the example above.

  • px – pixels
  • em – a unit relative to the size of it’s parent element
  • rem – a unit relative to the size of the root element (<html>)
  • % – a unit relative to the size of it’s parent element

It’s a best practice to use some type of relative unit for font sizes. This allows the size of various text elements to adjust up or down, while remaining in relative proportion to one another. If one element gets larger, so do all the rest.

This also makes things easier when it comes to font sizes on various screen sizes.

I prefer to set a base font size in pixels on the root element (<html>), and then adjust the size of individual elements using rems.

html {
	font-size: 18px;
}
.entry-title {
	font-size: 1.875rem;
}

Font Size via Paragraph & Heading Tags

Another quick & easy way to change your WordPress font size is through the use of different HTML elements, or tags. By default, WordPress provides an easy way to switch between paragraph tags (<p>) and heading tags (<h2>, <h3>, <h4>, etc.).

Change WordPress font size with heading tags
Change WordPress font size using heading tags

IMPORTANT: The purpose of these tags is to create a structure, or outline, for your content. Technically, you should not use them for the sole purpose of changing your font size. You should not change text to an <h2> or <h3> if it is not a primary heading in your post.

Your SEO & accessibility could suffer if you go rogue with heading tags.

  1. Click on a post to open up the editing screen
  2. Highlight the text in which you’d like to change the font size
  3. In the toolbar above your content, click the dropdown menu that says “Paragraph”
  4. Choose the appropriate heading tag

The font sizes of paragraph & heading tags are controlled by your theme, so changing themes will likely change your font sizes as well. Please use this option cautiously.

Change WordPress Font Size Using a Font Plugin

If your theme does not support font size changes, and you want to change the size of specific text elements, you can use a WordPress font plugin. Using a plugin has a few advantages:

  • Your font sizes will persist, even if you change themes
  • You can change other font styles, in addition to font size
  • Full flexibility for all aspects of your WordPress site, not just post content

This method should only be used if you do not understand CSS, or do not have access to change your theme’s styles. It could work well for beginners & non-techies, but it is generally not the best option.

NOTE: Our recommended font plugins are only relevant if you’re using Google Fonts on your site. For all other fonts, you should consider using CSS in a child theme’s style.css file.

If you’ve successfully changed the font size on your WordPress site, you can stop here. But I do think it’s important to briefly cover two methods that we don’t currently recommend.

The Problem with WordPress Font Size in the TinyMCE Advanced Plugin

The TinyMCE Advanced plugin is incredibly popular, being actively used on over 2 million WordPress sites. It adds a ton of features to the TinyMCE toolbar in the WordPress editor, many of which are quite useful. And one of its features is the ability to adjust font size.

TinyMCE Advanced plugin banner

However, there are a few reasons why we don’t currently endorse using the plugin for font size changes:

  1. Because it adds so many features, it can often be overwhelming for beginners. Some of its features might also conflict with other plugins that perform similar tasks.
  2. WordPress 5.0 (to be released late 2018) will bring about many changes to the WordPress editor, and the TinyMCE Advanced plugin may or may not still function in the same way
  3. It allows users to change the font size of any element, on any post, at any time. This could lead to inconsistency across your site, with varying font sizes being used.

Don’t Change Font Size in WordPress with Inline CSS

Font size changes with inline CSS would look something like this. You’d wrap a <span> tag around some text and apply the CSS font-size property to it.

<span style="font-size:12px;">This text would be twelve pixels in size.</span>

We don’t recommend this option because:

  1. It opens itself up to inconsistency. You might change something to 12px on one post, and then 14px on another.
  2. It’s a tedious process, and needs to be done each and every time you want to use a different font size. Not very efficient.
  3. If you use it many times on one page, it adds to the digital weight of the page, which could negatively impact page performance, and slow down your site.

That covers all the ways we could think of to change the font size in WordPress. Please be responsible and choose one of the better methods. Not only will it give your site a more professional look, but it could save you from headaches in the long run.

  • Level: Beginner
  • Prerequisites: WordPress
  • 1,732 words
  • 12 comments
Share

12 Commentson "How to Change Font Size in WordPress: The Right Way & The Wrong Way"

  1. /

    How did you customise your comment box? How did you include the msg “Please be courteous….”? Looks pretty good. Thanks in advance for your tips.
    Jerry

    → Reply

    1. (Author) /

      Hey Jerry. Thanks!

      Check out this article to get started customizing your comment area. That “please be courteous…” message is from the placeholder attribute.

      <textarea id="comment" name="comment" aria-required="true" placeholder="Please be courteous, respectful &amp; try to stay on topic. Thanks for joining the discussion :-)"></textarea>

  2. /

    How would I go about changing the font size in a list? I have a bulleted list in an article (WordPress) with too small of a font.

    I do have a typography plugin installed, Easy Google Fonts, so I have been able to enlarge the paragraph font size to something more legible. But there isn’t an option to increase the font for bulleted items. I’m not sure how to change that. It’s too small!

    Any ideas would be wonderful. Thanks.

    → Reply

    1. (Author) /

      Hi Jessica,

      It depends on how your theme has currently coded the font-size for lists, but you want to target li elements. You could try something like this:

      body .entry-content ul li,
body .entry-content ol li {
font-size: 1rem;
}

      Change the “1rem” to any value you want, including a pixel value, like 16px.

      If you post a link to your site on a page that has a list, I can help make sure the code will work.

  3. /

    It worked! Thank you so much. It’s a site I’m working on so it isn’t live yet. Glad that was easy. :)

    → Reply

  4. /

    I’m using the newer Gutenberg editor, and when I make a block a heading, it defaults to H2. With my theme, this looks too big (practically the same size as my H1 title), and I have to manually change each heading to H3 every time I want to use one. It’s pretty tedious. Is there a setting or something I can change so that it defaults to H3 instead of H2? Thanks.

    → Reply

    1. (Author) /

      Not that I know of, April. Sorry. After you change one to an H3, you could copy it when you need a new one. But I don’t know of a way to change the default heading block to always be an H3 to start.

  5. /

    Thanks, Dave. I appreciate that you replied.

    → Reply

  6. /

    Hi Dave, thanks for your informative post! I’ve managed to change most of my font size using the css adding code method. However, I can’t seems to change the font size for my bullet/numbered text. Please advice on the code. My website is: http://www.mytoothbuddy.com
    Appreciate your response.

    → Reply

    1. (Author) /

      Hi Hans — So it looks like you’re using Gutenberg because all of your paragraph text has the .has-medium-font-size class assigned to it, which is giving your paragraph text a font size of 20px.

      The easiest & most consistent way to get your list items to also be 20px is by adding this CSS either to a child theme style.css file or the Additional CSS area in the Customizer:

      .entry-content li {
    font-size: 20px;
}

      That will make all list items (both bulleted & numbered) that are inside your main content area use a 20px font size.

      Let me know how it goes.

    2. /

      Hi Dave!

      I’ve took your advice and add in the code. Now my CSS section looks like this

      “.post p{line-height: 1.5em;
      padding-bottom: 20px;}
      h2, h3, h4 {
      font-size: 2.2em;}

      .entry-content li {
      font-size: 20px;
      }
      ”

      And happy to inform you that it works! All my font sizes are of decent readable size now =) Appreciate it Dave!

      However from the google search console, I’ve recevied error suggesting that my fonts appeared in mobile are too small. Any advice on that?

    3. (Author) /

      That message from Google Search Console is a very common one, and it’s not always the best indicator of the legibility of your content on mobile. I’ve seen it with most sites I’ve worked with. Of all the things to care about for your site, that should probably be at the bottom of the list.

      But if I had to guess, they’re probably referring to the post meta info below the title of your posts. “August 28, 2019 / 6 Comments / …” And you can make this larger with the following CSS:

      .container .minor-meta {
font-size: 1.375em;
}

      You also have some text in the footer, as well as the mobile slideout menu, that is pretty small. If you really wanted to get into it, you could increase those font sizes as well.

      But the #1 thing I’d do, if I were you, is get an SSL certificate installed and force your site to load over HTTPS. Google cares WAY MORE about this than they do font size on mobile.

What Are Your Thoughts?

All fields are required. Your email will not be published.

You can use standard <code> and <pre> tags to post code examples, or a service like codepen.io.