A font is considered a combination of different typefaces, weights, sizes, slopes, and designs to form a printable or displayable set of text characters. Using fonts makes your website appealing but can also make it unappealing if you don’t know How to Change Font in WordPress.
In this guide, we’ll help you change fonts using the built-in options in your WordPress theme. Even if your theme does not have the fonts you like, we will introduce you to a plugin with a lot of font choices.
Let’s go!
How to Change Font in WordPress (Font Styles, Font Colors, and Font Sizes)
There are 4 ways to change fonts in your WordPress site that you can try by using the customizer, the block editor, the old classic editor in post/page, or your theme stylesheet. Moreover, you will learn How to Change Font in WordPress by changing the font styles, font colors, or font sizes.
How to Change WP Font Styles
Changing WP Font Styles in The Block Editor
If you’re using the new version, the block editor such as Gutenberg, you can change your text style easily while you are editing your blog post. You just need to choose the text and there is a styling menu which appears right above the text you have selected.
There are various options to change your font styles such as bold, italicized, strikethrough, inline image, etc. Then click the font style you want and see the result instantly in the block editor.
That’s How to Change Fonts in WordPress in the block editor. Let’s check the second method of changing font styles.
Changing WP Font Styles in the Old Classic Editor
You can also change font styles with the old classic editor of WordPress. So How to Change Font in WordPress this way? Well, it won’t appear in the styling menu above the selected text, there will be a toolbar under the “Add Media” option to help you change your text style. Even if you wish to see more options like strikethrough, then click the Toolbar Toggle icon to see all of it.
Similar to the first way, you just need to select words then click on the style you want on the toolbar. After that, your text will be changed as your purpose.
Changing Font Styles in the Customizer
Another way to change the Font WordPress styles is by accessing the customizer.
First, you should open your WP admin area, hover your mouse to “Appearance” on the sidebar then click the “Customize“. Next, you can see “Additional CSS” then click on it. There is a space box for you to type in the CSS.
So now you can enter the CSS there to change your font style. For instance, to change all H1 and H2 to bold letters, you can try this CSS:
Changing Font Styles in Your Stylesheet
If you are not a beginner and you know even a bit about coding, you can try How to Change Font on WordPress with this method.
However, you must create a WP child theme for your own font styling. This is to help you avoid any issues with your parent theme. After creating a stylesheet in your child theme, it’s time to make font styling in the child too.
Now you can find the file of style.css in your WordPress theme folder in wp-content/themes. Then you can edit or change the CSS in that file, stylesheet. You can add any font style at the end of your stylesheet file. Even if you want to remove or overwrite the existing font style, it’s possible as well.
For example:
CSS to change the font-weight in your stylesheet:
CSS to change the font-style:
CSS to change the text-alignment:
How to Change WP Font Colors
When you write a post or page, you might sometimes edit the color of some text so visitors can easily see it. However, do not make it over, a lot of colors in your site will confuse your readers.
Changing Font Colors in Block Editor
You can edit the text color as well as the text background in the block editor. In particular, you can quickly change the text color via the styling menu. If you did not see the text color on your styling menu, you can click the arrow next to there to find it.
Another way is to go to the “Block” tap and click the “Color Settings” part of the box on the right column of your post.
Now you can select/ choose the text then click on “Text color” or “Background Color” to edit as you want.
If your color combination is not good and readers have a hard time reading it, there will be a warning notification right below the “Color Settings” like “This color combination may be hard for people to read. Try using a brighter/ darker background color and/or a darker/ brighter text color” so you would know and re-change it.
So now you already know How to Change Font in WordPress via the block editor. Is it easy?
Changing WP Font Colors in Your Classic Editor
Similarly, you just need to select the text and click the A icon on your classic editor’s toolbar to change its color. Even if you choose to change only one word or a paragraph, it’s all possible. Let’s see the example below:
Remember that it will be useful and engaging visitors if you change the color correctly. But your site will look garish if you overuse it.
Changing Font Colors in the Customizer
For this part, it’s good if your theme has a color scheme to Change Font WordPress colors. It means you can pick a new color scheme for your theme without any issues. Let’s check the color scheme in your WordPress customizer below:
In particular, you can add CSS to find the color you want in case your theme does not have the target specific element to edit their color.
First, click the “Appearance” on your sidebar -> select “Customize” -> choose “Additional CSS” then type your CSS in the box.
For instance, you can type like below for changing H1 color:
h1 {
color: #564534;
}
In case that CSS does not work well, you can add more specific CSS. This happens since it depends on each theme.
#site-title a {
color: #564534;
}
If you like the color, click the “Publish” button to save your changes.
Changing Font Colors in Your Stylesheet
Same as font styles, you can change font colors in your theme’s stylesheet too.
For instance, you can edit the main text color for your site with body element:
body {
color = #222222;
}
If you want the elements to have different colors, you have to override all existing stylings with the same elements. Your body element now will change all text colors after you Change Font in WordPress.
Changing Font Sizes in WordPress
It’s possible that your default fonts are suitable with your website. You definitely want it bigger or smaller. So how to do it?
Changing Font Size in Block Editor
You can easily change the text size by selecting your preferred block and clicking the “Text Settings” section at the right column in the “Blocks” tab. There are many options to choose: Small, normal, large, huge.
However, don’t overuse it too. If every paragraph has a different font size, it will be hard to read and look chaotic. Do you think it’s easy to learn on How to Change Font in WordPress, especially font size in the new editor.
Changing Font Size in the Classic Editor
Unlike others, you can not change the font size in the old classic editor. Hence, you need to upgrade your version if you need it.
Changing Font Size in the Customizer
You should check your theme if it has the option to edit your font sizes in the customizer. It’s possible to edit the WP font size of the entire site or only headers or body text.
In case your installed theme has no customizer option, you can select “Additional CSS” from “Appearance” in the sidebar -> select “Customize“. Then you can type your CSS in the text box.
For instance, to make the headings bigger in the WP widget areas, you can type as below:
h2.widget-title {
font-size: 3em;
}
Maybe this WordPress Change Font size is too big. However, it’s just an example.
Changing WP Font Size in Stylesheet
How to Change Font in WordPress Theme in the stylesheet file? Well, you can follow the same steps like changing font colors or styles above.
You can change whole text size in your site, you can refer this body element:
body {
font-size: 15px;
}
Please note that, you have to use pixels for the body element and use em for the rest.
Here is the example of changing H1 size:
h1,
#site-title {
font-size: 2em;
}
To avoid any risk while editing the fonts in stylesheet, you should test your changes on the staging site.
How to add Google Fonts to any WordPress theme (Optional)
If you don’t like to change fonts via your theme’s built-in options, you can try to use Google Fonts plugins. So you can have more font options, it can be thousands of fonts. The question now is How to Change Font in WordPress with plugins?
First, you have to install your WordPress Font plugin then activate it. Please refer to our instruction on How to Install WordPress Plugins if you’re a beginner.
There are 2 free plugins that we highly recommend you to pick:
Secondly, go to your plugin’s settings and select the font you like. You should remember the name of that style for setting up later.
Lastly, go to “Appearance” -> select “Customize” in your WordPress admin to find the “Typography” section.
After that, you can choose “Default Typography” and now all content types appear for you to set up such as paragraphs, H1, H2, H3, etc.
And click the “Edit Font” in Heading 1, for example. Then you type the name and weight/ style of font that you have noted earlier to see real-change right away.
When you change all fonts, you can click the “Publish” button.
Final Thoughts
Hopefully, our instruction on How to Change Font in WordPress helps you to find the best way you want. If your theme has built-in typography options, you can change fonts right in the customizer. However, you can add a font plugin to get over 600 fonts options too.
