How to change the font in WordPress – Font type, size and color

By | March 11, 2015

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.

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:

To access your stylesheet, click ‘Appearance’, and then ‘Editor’.

Accessing-stylesheet-css

In the stylesheet, look for ‘body’:

Stylesheet-CSS-change-the-font2

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:

Before: After:
body {
font-size: 14px;
font-family: “Ubuntu”, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
body {
font-size: 14px;
font-family: Open Sans, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
 Change-the-font-wordpress-before(Ubuntu)  Change-the-font-wordpress-after(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.

Before: After:
body {
font-size: 14px;
font-family: Open Sans, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
body {
font-size: 16px;
font-family: Open Sans, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
 Change-the-font-wordpress-size-before(14px)  Change-the-font-wordpress-size-after(16px)

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.

Before: After:
body {
font-size: 14px;
font-family: Open Sans, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #444;
}
body {
font-size: 14px;
font-family: Open Sans, Helvetica, Arial, sans-serif;
text-rendering: optimizeLegibility;
color: #111;
}
 Change-the-font-wordpress-before(#444)  Change-the-font-wordpress-after(#111)

Notes:

– 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:

Change-the-font-wordpress-text-editor

Changing the font type

You can change the font type by using the style=”font-family: yourfont” attribute.

Example:

<p style=”font-family: Courier”>This paragraph text uses the ‘Courier’ font.</p>

Result:

This paragraph text uses the ‘Courier’ font.

Changing the font color

You can change the font color by using the style=”color: #000000″ attribute.

Example:

<p style=”color: #6DA325″>This paragraph text is green.</p>

Result:

This paragraph text is green.

Changing the font size

You can change the font size by using the style=”font-size: ##px” attribute.

Example:

<p style=”font-size: 20px”>This paragraph text is 20 pixels in size.</p>

Result:

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.

Example:

<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>

Result:

This paragraph text uses the ‘Courier’ font, green color, and is 20 pixels in size.

Note:

– 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>

Links

Google fonts
Hex colors: find, mix, and convert

8 thoughts on “How to change the font in WordPress – Font type, size and color

  1. Eric

    Hey this is great information I really enjoyed it and it is exactly what I needed. Thanks

    one question though – Is this relevant to all software revs or only the most recent?

    Thanks again!
    Eric

    Reply
    1. GuidoGuido Post author

      Do you mean if this works with all versions of WordPress? As far as I know, it does.

      Reply
  2. SherryV

    Very thorough and easy to follow wordpress tutorial. Will be a saver, especially the last bit for changing on a post or page.

    Reply
  3. adam

    Great post. I have been wondering how to tweak my site’s theme for a while. I know a little HTML5 and CSS3, but I wasn’t quite sure how to go about changing the style sheet. Your post explains everything very well. Thanks for sharing!

    Reply
  4. Julie

    Hi Guido,

    Great Site! Great Information. I have bookmarked it and will be back.

    Julie

    Reply
    1. GuidoGuido Post author

      Thanks Julie. If you want to stay up-to-date with new material on this site, you can also do so by following on social media :)

      Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

*