1. Home
  2. WordPress Tutorials
  3. How to Use a Custom Font on Your WordPress Website

How to Use a Custom Font on Your WordPress Website

Using a custom font on your WordPress website (or any website) can be a complicated and frustrating task. Things like converting the font to a web format, uploading the files, and updating CSS files can be time-consuming.

It can be a long way to go to stand out from the crowd.

But there is an easier way to use a custom font. We’re going to spotlight a WordPress font plugin called Use Any Font, which makes it easy to have a custom font up and running in a few minutes.

The Pros and Cons of Custom Fonts

Custom fonts are great but they should come with some warning labels.

If your font files are large, they will have a negative impact on page load speeds. Not to mention the fact that not all web browsers support all font types. And then there is the tricky issue of rights and licensing, which we’ll talk about in a minute.

But the obstacles are worth overcoming. A custom font can telegraph a site’s purpose or aspirations (consciously or subconsciously). The New York Times Magazine underwent a redesign a few years ago that included the use of new typefaces to give the site “a literary feel.”

Most magazine and newspaper websites use custom fonts to distinguish themselves from the competition and to translate their print appearance to the web.

But you don’t have to be a big publisher to benefit from custom fonts. They can help take any website from typical to extraordinary.

Website Typography Has Come a Long Way

The beautiful, varied web that we take for granted started life as a whole lot of Times New Roman on a gray background, with the occasional 5 or 10 kb image thrown in to slow down the page load.

The typography was boring and standard because early web browsers were only able to display fonts that were installed on the visitor’s computer. That meant if you wanted all users to have a consistent experience, your font selection was extremely limited.

The introduction of web fonts freed us from the restriction of displaying fonts pulled from the visitor’s operating system and shifted the font presentation to the browser.

Web fonts also make it possible for a site to use a unique custom font, which is not only a powerful differentiator but a valuable design tool as well.

Using a Custom Font on Your WordPress Website

WordPress has a lot of plugins that can connect you with free web font collections like Google Fonts. The WordPress Jetpack plugin even has a built-in Google Fonts option.

But if you want to use custom fonts, you need a plugin that allows you to upload a font to WordPress. That’s what we’re looking at here with Use Any Font.

Use Any Font is dead simple, and it’s free to use for a single font. If you want to use multiple custom fonts, you’ll have to pay for a premium API key.

Let’s install it and I’ll show you how easy it is to set it up.

Log in to your WordPress admin panel.

In the left column navigation, mouse over the “Plugins” link and click the “Add New” link.

mouse over the "Plugins" link and click the "Add New" link

In the “Search plugins…” box, enter “Use Any Font.”

search for the WordPress Use Any Font plugin

Once you have located the plugin, click the “Install Now” button.

click to install the WordPress Use Any Font plugin

When the plugin has been installed, click the “Activate” button.

click to activate the WordPress Use Any Font plugin

Configuring Use Any Font

In the left-column navigation, click the “Use Any Font” link.

click the "Use Any Font" link

In the “API KEY” section, click the “Generate Test API Key” button.

click the "Generate Test API Key" button

An API key should appear in the “API KEY” field.

Click the “Verify” button.

click the "Verify" button

In the “Upload Fonts” section, click the “Add Fonts” button.

click the "Add Fonts" button

Enter a name in the “Font Name” field. This is for your reference, it can be anything you’d like.

In the “Font File” section, click the “Choose File” button. Select a font file.

select a font file

Under the “Upload,” button you’ll see, “By clicking on Upload, you confirm that you have rights to use this font.

Before we continue…

Let’s Talk About Rights

Just because the technology exists to use any font on your website, it doesn’t mean you should. Many fonts are licensed for use on your computer, but not for other uses. This often includes embedding on your website.

There’s a lot that goes into font licensing. But the likelihood is unless you paid for a font (and the license you paid for includes embedding the font in a web page) you probably don’t have the right to use it on your website.

Fonts, like any other creative work, are protected by copyright laws. Whether you want to respect those laws is up to you of course. Personally, I recommend respecting all laws. It’s the best way to stay out of court.

You may not think using a font on your website could possibly land you in hot water, and realistically, you’re probably right. But the people who were sued by the RIAA in 2003 thought that downloading a Backstreet Boys MP3 was harmless, too.

Again, it’s up to you. But artists (and creating fonts is an art) have to eat too. Be cool and make sure you’re using properly licenses fonts on your website. If you don’t want to pay for the privilege, there are plenty of free web fonts out there.

Now back to our regularly scheduled programming.

Continuing to Configure Use Any Font

For this tutorial, I’m using a font made from my handwriting, which I have the right to use anywhere I’d like.

Once the font file is selected, click the “Upload” button.

click the "Upload" button

In the “Assign Font” section, click the “Assign Font” button.

click the "Assign Font" button

In the “Assign Font” section, select your font from the dropdown. Then, select which elements you’d like it to apply.

select which elements you'd like to apply font to

Scroll down and click the “Assign Font” button at the bottom of the section. Keep in mind the “Assign Font” button at the top will not save the selection.

click the "Assign Font" button

Now your website pages will be using the custom font for any elements you specified.

custom font in action

Make Your Website Stand Out From the Crowd

Okay, you probably don’t want to use something as unusual as a handwriting font for all of your site text. But a distinctive, different font can really make your website stand out.

Make sure you take performance into account though. There is a cost for being different, and you don’t want that cost to slow down your page loads too much. If your site feels sluggish after implementing custom fonts, look for a different typography.

Fun fact to amaze and annoy your friends: did you know that the correct term for what we now call a font is really typeface? That’s right. Times New Roman is a typeface, but different sizes and weights of the typeface are different fonts.

So, bold Times New Roman is a different font than italic Times New Roman. And 12 point Times New Roman is a different font than 18 point Times New Roman.

The terminology goes back to the days of printing with metal type. These days, only older graphic designers or people who still print with metal type really make the distinction. But now you know the difference.

And when it comes up on Jeopardy, you’ll know how to answer.

Have you implemented a custom font on a website before? Do you think the increase in page load time is worth the design boost?

Author: Michael Phillips

Michael Phillips is a web hosting industry veteran, helping people make the most of their web presence since 1995.

Updated on September 6, 2019

Was this article helpful?

Related Articles

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.