There are two ways of changing the font in WordPress: on your entire website, or only for (part of) the text in a Page or Post.
Table of Contents
Changing the (default) font on your entire WordPress website
By doing this, you’ll change the font that is automatically used on all your posts and pages in WordPress. This can only be done by editing your stylesheet.css file.
Full video instructions:
In the stylesheet, look for ‘body’:
Before you change anything, make a copy of your entire stylesheet, and save it, just in case you break something, or want to change back to the default settings.
Changing the font type
For a visitor to see the font you’re using, the user needs to use a browser that supports the font. This is why multiple fonts are addressed in the stylesheet. These backup fonts are known as fallback fonts. If the first preference isn’t available, it’ll use the next one in the stylesheet.
To change the font type, find the name of the font, and replace the first font in the line of fonts. You don’t have to use quotation marks (“”). When you’re done making changes, click the blue ‘Update File’-button to make your changes take effect.
Always leave a couple of fallback fonts!
In this example I’m going to change the font from Ubuntu to Open Sans:
Changing font size
You can change the size of the font by changing the px (pixel) value. In my example, I’m going to make my font larger, using 16px instead of the default 14px.
Changing font color
The stylesheet uses font color in the Hex-format. To find a hex color you like, you can use the color code tool on this website to convert RGB values to Hex. You can also use this tool to mix colors to find a new color you’d like to use.
Usually, you want to use a shade of grey. In this example I’m going to make the font a bit darker. The effect is going to be subtle.
– Stylesheet changes will be lost when updating your WordPress theme. You can prevent this by using a child theme (article with full instructions). If you aren’t using a child theme, save a copy of your edited stylesheet, so you can copy it back in, right after updating your theme.
– Headers usually have their own designated size and color in the stylesheet. You have to change this separately.
Changing the font in part of a post or page
On posts or pages, you can change the font for specific parts of your text, by using HTML. You can add HTML to your WordPress posts by switching to the ‘Text’-editor, by clicking on the ‘Text’-tab:
Changing the font type
You can change the font type by using the style=”font-family: yourfont” attribute.
<p style=”font-family: Courier”>This paragraph text uses the ‘Courier’ font.</p>
This paragraph text uses the ‘Courier’ font.
Changing the font color
You can change the font color by using the style=”color: #000000″ attribute.
<p style=”color: #6DA325″>This paragraph text is green.</p>
This paragraph text is green.
Changing the font size
You can change the font size by using the style=”font-size: ##px” attribute.
<p style=”font-size: 20px”>This paragraph text is 20 pixels in size.</p>
This paragraph text is 20 pixels in size.
Changing the font type, color, and size all at once:
When changing multiple text properties at once, you can add them all by separating them using a semicolon (;) and a space.
<p style=”font-family: Courier; color: #6DA325; font-size: 20px”>This paragraph text uses the ‘Courier’ font, green color, and is 20 pixels in size.</p>
This paragraph text uses the ‘Courier’ font, green color, and is 20 pixels in size.
– In all of the examples above, I changed paragraph text. You can do the same for your headings by setting style attributes in your header tag. For instance:
<h2 style=”font-family: Courier; color: #6DA325; font-size: 20px”>This heading text uses the ‘Courier’ font, green color, and is 20 pixels in size.</h2>