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
- In Your WordPress Theme Options (Customizer)
- Custom CSS (preferred, but a little technical)
- Paragraph & Heading tags (only specific use cases)
- Using a WordPress Font Plugin (great for Google Fonts)
Bad Methods for Changing Font Size in WordPress
- TinyMCE Advanced Plugin
- Inline CSS (or
<span>
tags)
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.
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.
- Navigate to Appearance > Customize
- Look for “Fonts,” “Typography,” or something similar (this will differ from theme to theme)
- Update the font sizes you want to change
- Use the live preview on the right to test your changes
- 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.
- Login to your WordPress admin area
- Navigate to Appearance > Customize
- Click on Additional CSS
- Enter your CSS rules (examples mentioned above)
- Preview your font changes in the preview area to the right
- 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.).
- Click on a post to open up the editing screen
- Highlight the text in which you’d like to change the font size
- In the toolbar above your content, click the dropdown menu that says “Paragraph”
- 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.
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.
However, there are a few reasons why we don’t currently endorse using the plugin for font size changes:
- 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.
- 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
- 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:
- It opens itself up to inconsistency. You might change something to 12px on one post, and then 14px on another.
- 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.
- 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.
Jerry GOPAUL / #
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
Dave Warfel (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.Jessica Nunemaker / #
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.
Dave Warfel (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: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.
Jessica Nunemaker / #
It worked! Thank you so much. It’s a site I’m working on so it isn’t live yet. Glad that was easy. :)
April / #
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.
Dave Warfel (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.
April / #
Thanks, Dave. I appreciate that you replied.
Hans / #
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.
Dave Warfel (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: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.
Hans / #
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?
Dave Warfel (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:
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.
Bill Hixon / #
Yikes! All the talk about how ‘easy for beginners’ WordPress is, and how no coding experience is necessary, and all I wanted was to change a font and this is what I find is necessary?
Never mind.
Dave Warfel (Author) / #
Hi Bill — Many themes make it extremely easy to change your fonts. If you choose a theme that has Google Fonts integration built-in (most of the good ones do), then you don’t need to go down this route. These options are only for those who find themselves stuck with a theme that doesn’t provide font options.
Also, giving the user the ability to use custom fonts can sometimes backfire on the user themselves. Loading too many fonts, or even font variants, can have a negative effect on your site’s performance. So for some users, it’s actually better for them that the theme makes that decision and doesn’t give them the option.
If you’ve heard that WordPress is “easy for beginners,” you didn’t hear it from me. I think it’s a great platform in many ways, but for ease-of-use, Squarespace, Wix and many others are more beginner-friendly. Sorry you were given that info.
Kirstin / #
Would you know how to increase the size of the title given for a page? This is inserted on the home page at top and is quite small. When writing a page I can change the font size of the content, but not the title for the article.
I really prefer your use of rem, and so tried it for all of the h2 and so one headings, but it doesn’t seem to have changed this part.
Dave Warfel (Author) / #
It’s controlled by your theme and every theme is different. I need a link to your site to be able to see the code, and then help.
Kirstin / #
Hmm, the site is under construction. I’m not sure that you can see the code! The site is lasttreelaws.com.
Dave Warfel (Author) / #
You’re right. I can’t see the site. I just see the under construction page.
Subodh Gupta / #
How can I only change the font size or family of WP Text Editor? I’m using the classic editor.
By default, it’s set to 12pt. How to increase that?
Dave Warfel (Author) / #
You’ll need to use editor styles. You place a CSS file in your theme folder with the CSS you want to use for the editor.
If you search the web for “WordPress editor styles” you should find some tutorials.