How To Change Fonts In WordPress Using CSS

When you are building your WordPress website it can sometimes be difficult to find a suitable theme that has all the customization options that you require. 

One of the options that is sometimes lacking is the ability to change the font, especially if you are using a free theme. 

In this post I will show you how to change fonts in WordPress using CSS.

How To Edit CSS

To edit CSS in WordPress you first have to access the CSS editor from your WordPress dashboard.

From the menu on the left side of your dashboard, go to AppearanceCustomize.

Here you will see a menu where you can customize your theme.

From here you can customize the layout, colours, typography and many other options.  The section we will be customizing today is the additional CSS.

By adding custom CSS in this section we can make changes to the theme very easily.

We will be using this CSS editor to add some custom CSS to our WordPress website and add the required font.

Finding A Font

Before we can edit the CSS in WordPress we first have to find the font that we require and also find the correct CSS to add to our editor.

To find the font that we would like or to browse fonts if you are unsure which one to use you can find them on Google Fonts.

This website has a large amount of fonts to choose from and also provides the CSS code required to add them to your site.

You can search for the font by name if you already know it, or just browse the different categories until you find the perfect font for your site.

Once you have decided on a font you can select it by clicking the + sign in the corner.  When you click this it then brings up more details about the font.  You then need to look towards the bottom of the box that has opened and you will see a section that reads – SPECIFY IN CSS

Copy the CSS code that is in the grey box.  The code will look something like – 

font-family: ‘Raleway’, sans-serif;

This is the code we will be adding to our CSS editor in WordPress. 

The code in the example is for the Raleway Font.  Your code will have the name of the font you have selected.

Adding Code To The CSS Editor

Now we have our code we need to head back to the CSS editor in WordPress as mentioned earlier. Although we have the details about the font copied to our clipboard, simply pasting this into the CSS editor won’t change the font as there are still some details missing.

Before we paste the font details into our editor we have to decide which part of the text we are changing, such as the headings or paragraphs.  You will need to check what type of text is used –  for example, a heading might be H1, H2, H3, H4 etc and a paragraph would be P.

When you have found this information you can start to add the code.  To start with type the code for the type of text such as H2. After this code type {. This will bring up two brackets like this – {}. Between these two brackets paste the details you copied to your clipboard.  Your code will look like this –

H2{font-family: ‘Raleway’, sans-serif;}

*Remember your code will have the name of the font you have chosen.

Changing The Font Size

The size of the font can also be changed using CSS.  To do this you just need to add a bit of extra code to the editor.

After the semi-colon type – 


So your code will look like this –

H2{font-family: ‘Raleway’, sans-serif;font-size:60px;}

The number can be set for your required size.  In this example it is set to 60px.

Changing The Colour

You can also change the colour of the font using this method.  

To change the colour just add after the font name – 


Your code will then read – 

H2{font-family: ‘Raleway’, sans-serif;color:red;}

This is using the colour RED as an example.  You will need to add the colour you require here.  You can use the HTML colour code such as – #FF0000.  This is the HTML code for red.  You can use any HTML colour code for your required colour.

Here are a few popular colour codes – 

  • Navy #001f3f
  • Blue #0074D9
  • Aqua #7FDBFF
  • TEAL #39CCCC
  • OLIVE #3D9970
  • GREEN #2ECC40
  • LIME #01FF70

So that is how you change fonts in WordPress using CSS.  I hope you have found this post helpful to your WordPress project.

If you want to see more WordPress tutorials you can find them here.

You can also check out the Resources I use for my WordPress websites here.

Thanks for reading this tutorial and good luck with your website.