1. Home
  2. WordPress
  3. WordPress Admin Editor
  4. How to Change WordPress Fonts

How to Change WordPress Fonts

Adding Web Safe Fonts

If you're planning on using a web-safe font that is automatically recognized, you can just go to the Customizing Additional CSS interface and add the font like you would to a regular CSS file. CSS in this interface will overwrite the default CSS. 

See how to find the Customizing Additional CSS interface in our article, How to Change WordPress CSS.

Adding New Fonts

It is possible to add new fonts to your WordPress site in a number of different ways.

Plugins

There are plugins that will give you access to new fonts for your site. Many of these plugins don’t require any CSS experience, so this is an easy way to incorporate new fonts.

Adding to Site Files

Unless you're using a plugin or one of the included web safe fonts, you will probably have to access the site's files to add new fonts. This is a good bit trickier than using plugins.

Steps Before You Make Changes
  1. Save a copy of your current theme's files. This way, if your changes accidentally break your website, you can reset it.
  2. Create a child theme
Finding Site Files

Though Google Fonts does offer a plugin, the following steps are for its web version.

Before you add any new fonts, you need to find your site files.

  1. Log in to your WordPress account through the ACC. For instructions on how to do this, check out our How to Log In to WordPress article
  2. Once you’re in your WordPress admin editor, go to the left sidebar
  3. Hover over Appearance, then click Editor in the drop-downappearance hover image
  4. In the right sidebar, find and click your theme's head file. This will likely be header.php header.php location image

You can add your font files or link to fonts in this file.

Adding Google Fonts to Site Files  
  1. Go to Google Fonts and pick out a font (or two)
  2. Add fonts by clicking the plus button in the right corner of the font box
  3. Click the black bar at the bottom of the screen when you are finished - this is your font “cart”
  4. Under Embed Font, click Standard
  5. Under Standard, copy the text
  6. Go to your theme's header files and paste the text into its <head> element
  7. Scroll to the bottom of the page and click Update File
  8. Go back to your Google Fonts cart and under Specify in CSS, copy the text
  9. Go to your Customizing Additional CSS interface and paste the text into the text field. To find this interface, see our How to Change WordPress CSS article
  10. Enclose the text in curly braces and specify what elements you want the font to be applied to. It will resemble the code below:
    • h1, h2, p {font-family: 'Roboto', sans-serif };
  11. Click Publish

If done correctly, your site should now reflect the font change.

Using a Font File
  1. Upload the font file to your server
  2. If you’re using a font file, it most likely has a CSS file with the @font-face rule filled out. Find this file and copy the @font-face rule and everything encased in its braces.
  3. Paste this into the text field in the Customizing Additional CSS interface. To find this interface, see our How to Change WordPress CSS article
  4. Check the path files. If the file paths changed when the files were added to the server, this will need to be reflected in the code

For example, your code will look something like this after you add the file’s path:

@font-face {

font-family: ‘arialregular’;
Src: url(‘folder/arial-Regular-Webfont.eot’);
Src: url(‘folder/arial-Regular-Webfont.eot?#iefix’) format (‘embedded-opentype’),
url(‘folder/arial-Regular-Webfont.woff2’) format(‘woff2’),
url(‘folder/arial-Regular-Webfont.woff’) format(‘woff’),
url(‘folder/arial-Regular-Webfont.ttf’) format(‘truetype’),
url(‘folder/arial-Regular-Webfont.svg#arial-regular’) format(‘svg’);
Font-weight: normal;
font-style : normal;
}

Now we have to style our preferred text. Do this by writing out the elements you want to be affected (headers, paragraphs, etc.) below the @font-face rule

The element list should be outside the @font-face brackets, not within.

After the list, add brackets and put the font-family element and your new font’s name inside

h1, h2, h3, h4, p {  Font-family: ‘arialregular’, serif; }

All you have to do now is click Publish and the new font should be reflected on the site. 

Updated on May 9, 2018

Was this article helpful?

Related Articles