How to Change Fonts in WordPress to Make Your Site Unique

The days of a web ruled by white pages, black text, and blue links are fading into history. These days, if you want to get noticed your page has to “Pop”. JavaScript, CSS, and images all add to the pop of your website. Fonts also add a lot to the distinctive look of your website.

Unlike some of the other elements of your website though, fonts can be large blocks of data that – if not handled properly – can slow down the loading of your website. Speed is king these days so while pop is important, you need to make sure you don’t impact the speed of your site when using fonts.

In this article we are going to look at fonts and how they relate to WordPress, how to change fonts in WordPress, how to use Google fonts within WordPress, and finally, we will take a look at how you can organize your fonts so that they make your WordPress site look good while not impacting the speed of your site. 

So let’s get to fonting, shall we?

How to add new WordPress fonts to your site

1. Pick a font in the right format

The first step you need to do when working with fonts, is to select your font and get it into your site. If you search around, you will find that there are a lot of free fonts available for use. These fonts come in a variety of formats. You need to make sure that when selecting a font, you pick one that is available in the right format. As with everything on the web, you’ve got options and not all options are created equal.

• EOF: Embedded OpenType Fonts
  

This format is more compact OTF fonts.

• OTF: Open Type Fonts
  

These are the most commonly used web fonts.

• TTF: True Type Fonts
  

This is an older format developed in the 1980’s by Microsoft and Apple. 

• WOFF 1.0: Web Open Font Format
  

This format is broadly used for web pages and recommended by the W3C.

• WOFF 2.0: Web Open Font Format
  

This is a better option than WOFF 1.0 due to better compression abilities. 

As of this writing, all formats were supported by the current version of all modern web browsers. (HINT: Internet Explorer is not a modern web browser.)

All of the formats above will work, however, for performance sake, whenever possible, use WOFF2 fonts. Since they are compressed, they load faster.

2. Add the WordPress font to your site

There are a few different ways you can add custom fonts to your theme. Let’s look at two options: how you can do it manually and how you can do it through themes and plugins.  

Option 1: Add fonts manually through the File Manager

First, let’s look at the hard way. Loading it manually. 

The first thing we need to do is locate a font. I pulled one from one of my personal sites but you can search around and find one you like. 

Next we need to upload the actual font file to our website. Since my test site is hosted on SiteGround, I use the SiteTools > File Manager to do this. 

I am using the current WordPress default theme, twentytwentyone. So in that directory I create a directory named “fonts” and upload my font file there.

Next, we need to tell our theme that it has a new font to work with. We do this with a @font-face section in our stylesheet.

@font-face {

    font-family: “ace_sansbold”;

    src: url(‘fonts/acesans-bold-webfont.woff2’)  format(‘woff2’);

    font-weight: normal;

    font-style: normal;

}

This tells our theme that there is a new font family named ace_sansbold and it can be loaded from fonts/acesans-bold-webfont.woff2.

That’s all fine and good but just having a font doesn’t make any difference, we need to apply the font. I want this font used in my site’s title. To do that we find the style selector used for that and change it.

In twentytwentyone, that is the .site-title selector. By default it looks like this:

.site-title {

color: var(–branding–color-link);

font-family: var(–branding–title–font-family);

font-size: var(–branding–title–font-size-mobile);

letter-spacing: normal;

text-transform: var(–branding–title–text-transform);

line-height: var(–global–line-height-heading);

margin-bottom: calc(var(–global–spacing-vertical) / 6);

}

We want to make one change. We want to change the font-family line to this.

font-family: “ace_sansbold”;

This will tell our theme to use our new font instead of the one selected in the Theme customizer. The final will look like this:

.site-title {

color: var(–branding–color-link);

font-family: “ace_sansbold“;

font-size: var(–branding–title–font-size-mobile);

letter-spacing: normal;

text-transform: var(–branding–title–text-transform);

line-height: var(–global–line-height-heading);

margin-bottom: calc(var(–global–spacing-vertical) / 6);

}

Here is what my site title looked like before I added the font.

After I followed the instructions above, it looks like this:

Option 2: Add and edit fonts through themes and plugins

Ok, we did it the hard way, now let’s dive in the straightforward way, that is to take advantage of the themes and plugins to add fonts to your site easily. 

How to add fonts using the Theme Editor

Most modern themes have some way of adding fonts in and assigning them to parts of the site. I use the Astra WordPress theme on one of my sites and it comes with a feature called “Custom Fonts”. Instead of having to manually apply CSS and upload files, I am presented with a simple form that allows me to add or edit fonts.

Once I save it, everything is automagically handled for me. Not only is the font placed where it should be and readily accessible, but the new fonts now appear in my Theme Editor, ready for me to use. No hacking CSS!

As a bonus, Astra comes ready for me to use any of the Google Fonts. They are already programmed in and ready for me to use.

How to add fonts using WordPress Font Plugins

If your current WordPress theme doesn’t include fonts out of the box, there are still options as freemium plugins.

Fonts Plugin

“Fonts Plugin” gives you all of the Google fonts ready to use in WordPress. Additionally, it will let you enter in your Adobe API key if you have one, to use all of the Adobe fonts as well. 

One of the things this plugin won’t do is allow you to upload custom fonts like described above. The pro version may allow you to do that, but the documentation is unclear on this point.

One really nice feature of this plugin is that it gives you a new Gutenberg block called a “Google Fonts” block. This is an extension of the Paragraph block and it gives you the option to select a font for the block. Changing fonts for a text element in Gutenberg is difficult to say the least. It’s nice to see someone figuring that out.

There are other plugins that you can use to add fonts to your existing WordPress website theme. Take a quick look at the WordPress Plugin Repository and you’ll find several that will do the job.