How to Change Fonts in WordPress to Make Your Site Unique
Table of Contents
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.
How to change fonts in the Theme Customizer
Some WordPress themes have font selectors for different parts of your page or site. By default, twentytwentyone does not, but as shown above, Astra does. In Astra, the “Global” option has a “Typography” option. Clicking into Typography, you are presented with selectors to allow you to set different fonts and weights for things like:
- Body
- Headings (H1-H6)
This gives you broad control over the fonts that are displayed on your site. Different themes and plugins will add other options to the Theme Customizer to allow you more fine-grain control over what fonts are used where. A good example of this is the Font Plugin described above. It adds a section to the Theme Customizer for twentytwentyone to allow users to select and assign fonts.
You can pick fonts, weights, and sizes for most of the standard elements. For instance, above we manually replaced the font family for the .site-title selector. Using the Font Plugin, it is as simple as going to Advanced Settings > Branding.
There you can select the Site Title Typography options.
Bonus: How to keep fonts from slowing your site down
We’ve talked a lot about how to get fonts into your system and use them. Fonts, however, are just one more thing that a browser has to load to view your site. Things a browser has to load are just things that can slow it down. How can you deal with this? The solution is to preload your font files. Thankfully, if you host your website with SiteGround, you have access to the SiteGround Optimizer plugin which will make this task for you really straightforward. If you click through to the Optimizer Settings > Frontend > General you will find the “Fonts Preloading” feature.
This option is a little different than most of the other options in the plugin because it is not an on or off, you have to enter the URL to your font so they can be preloaded.
In our case, the URL would be https://example.com/wp-content/themes/twentytwentyone/fonts/acesans-bold-webfont.woff2. We enter that URL in and click Confirm.
This will insert the proper link tag with rel=”preload” in it so that the font file is the first thing that is loaded. You can see this by opening your website in a different browser, one that you are not logged into, visiting the page, and then click Inspect and Network. Then reload the page.
<link
rel=”preload”
as=”font”
href=”https://example.com/wp-content/themes/twentytwentyone/fonts/acesans-bold-webfont.woff2″
Crossorigin
/>
The first entry is the actual page you requested but the second entry will be the font file. It gets loaded as the first asset.
Important Tip:
Only preload the most common font files you use. If you preload all of your font files, you will end up slowing your site back down. One, maybe two font files preloaded should be good enough to get your site up and running.
Wrap Up
Fonts are a good way to make your site look distinctive. Used sparingly they can set your site apart without significantly impacting its performance.
As with all good things, less is more. Too many fonts will slow your site down and also make your site more difficult for your users to read. The end results are the same in both cases, users bounce to the next site, so, as with everything, use website fonts wisely and make sure you keep them optimized.
