Select Page

Many people make use of WordPress to publish their content but don’t know how to install custom fonts. If that’s you, you’ve come to the right place.

In this comprehensive guide, we explain three methods that help you to install custom fonts on your WordPress site.

How To Install Custom Fonts On A WordPress Site

The tried-and-tested WordPress platform offers the right degree of flexibility that many web publishers require these days.

Whether they are making diary entries of their daily musings, running a web store or publishing a blog.

For many users, WordPress has everything they need to get up and running but it can be limited on the fonts front.

Therefore, it may be desirable to install custom fonts on your site instead.

WordPress allows all users to operate with customised fonts.

But, you will need to know what you are doing to ensure that everything functions correctly on different devices. You also need to check differing orientations and browsers.

Thankfully, much of the necessary coding to make it all work seamlessly can run in the background.

Introducing 3 Ways To Install Custom Fonts

There are multiple options for you to take advantage of.

Read on to find out more about the three methods most WordPress publishers utilise to install custom fonts on their site.

Method 1: Add A Custom Font Straight To Your Site’s Chosen Theme

Adding a custom font in a WordPress theme often works best in terms of performance optimisation if you go about it directly.

In other words, by uploading font files to your WordPress site directly means you can speed up load times for users.

Consider Your Load Times

If you post several thousand words for each new blog entry, the slower load times when using third-party font repositories can make a significant difference.

Therefore, importing a font into your chosen WordPress theme will make sense.

In addition, anyone who is interested in their site’s SEO should be aware that faster load times help your site to rank higher.

Examine SEO And SERP

In other words, the speed of loading a page on a website plays a part in determining your position on a search engine results page (SERP) along with several other factors that impact on SEO-friendliness.

Of course, there is nothing to stop you from ranking highly without importing a custom font directly into your chosen WordPress theme.

It simply acts as a bit of a break when your site is compared to a similar one which loads faster than yours.

To add a custom font directly you will need the file of the font you want to use.

Essentially, all you will be doing is uploading this font file to the server that holds the rest of your site data.

Create And Upload A Folder

The problem is that WordPress does not offer its many users a dedicated fonts folder where this can occur.

Don’t worry though, because you simply need to make one using a file transfer protocol (FTP) client.

Bear in mind that you can add this folder in any location in WordPress.

Most WordPress users will understandably want to put it somewhere rational so they can find it again when it needs to be altered or updated.

Save In Theme Directory

Therefore, a good place to add it would be inside your theme’s directory.

Once the folder has been uploaded via the FTP client, you can open it up in your chosen theme’s style sheet.

This requires a little bit of coding which most users will be able to cope with if they have some experience.

An example of what is needed is below:

@font-face {

font-family: My New Font;

src: url(https://www.mywebsite.com/wp-content/themes//fonts/my-new-font.ttf);

font-weight: normal;

}

Of course, ‘My New Font’ is just an example.

You will need to use the right information for the custom font you have chosen.

Within the style sheet, you will need to inform WordPress which elements will make use of the font, such as headers.

By way of an example, the coding for doing so with h2 sub-heads looks like this:

.h2 site-title {

font-family: “My New Font”, Arial, sans-serif;

}

Now It’s Ready To Use

Have you entered all the relevant coding for your chosen font and where you will make use of it? Now close the style sheet section of WordPress. You will be able to start using the custom font in your WordPress editor.

Make sure you check that it is working for all of your chosen text elements before publishing. That’s something that should be quite easy to do thanks to WordPress’ built-in preview function.

Method 2: Use A Custom Font WordPress Plugin To Install Custom Fonts For You

If all the aforementioned information puts you off using custom fonts, then do not worry!

You are not alone.

Instead, you can make use of one of the many custom font WordPress plugins that do the job for you.

Choosing The Right Plugin

There are lots to choose from, but Fontsy is one of those plugins you can benefit from by getting it to run your chosen fonts for you locally. This means that, like method one, it will help to ensure your pages load fast without any delays from third-party servers.

To activate the popular WordPress plugin, Fontsy, you simply have to head to the usual ‘Plugins’ screen where it can be searched for and located within seconds.

This particular example of a WordPress custom font plugin will allow you to make use of all sorts of typefaces including the very popular range available from Font Bundles.

Benefits Of The Fontsy WordPress Plugin

Unlike some other font plugins you can opt for that will do a similar job for you, Fontsy will allow you to preview your chosen font or fonts in their new setting.

This may, or may not, be a big advantage depending on how you operate, of course.

It will generate your new style sheet with the necessary coding, as well.

In fact, it should not create any errors or clashes for you even if you happen to be using CSS or JS optimisation plugins at the same time.

All in all, this sort of functionality makes plugins the ideal tool for users with less technical expertise. But nevertheless who want fast page load times and a huge range of beautiful font choices.

Method 3: Edit Your Themes For Custom Fonts From Third-Party Repositories

Those who don’t wish to upload font files directly can still benefit from custom fonts without using a plugin.

This is because it is also possible to make use of them from third-party servers instead.

These are repositories where your chosen font’s data can be grabbed when a page on your site is loaded.

For instance, with Google Fonts, anyone can open a specific font’s specimen page to view it more fully.

Selecting Fonts

Once you have decided you want to use it, click on ‘Select This Font.’ This can be found at the uppermost part of the screen.

Once you have done that, a pop up will appear on your screen saying ‘1 Family Selected’.

Click on it and a new window will appear on the page.

Firstly, you will be able to see the load time for your chosen font.

If you are happy to proceed with it, then look beneath and you will see a couple of short fragments of code.

Using HTML Code

One is the ‘Embed Font’ HTML code and the other is the ‘Specify in CSS’ code.

You don’t need to know what they are or do, however.

Helpfully, Google also includes a link to getting started with your chosen font’s HTML code when publishing.

This is general, however, and not always specific enough for WordPress users.

Copy And Paste The Code

Don’t worry though because it is relatively easy to copy the code and paste it into the location you need.

Simply, paste the code within the ‘head’ tags of your chosen WordPress theme’s header.php file.

Don’t know where to find this within WordPress? Just navigate your way to your theme’s publicly available folder. That’s located here: public_html/wp-content/themes directory.

Once the code has been pasted, you can start using your custom font.

Bear in mind, however, that the style sheet needs to be within the same directory as the relevant header.php file.

If done correctly, you should be able to make use of your custom font from the third-party repository within a minute or two.

It’s Easy To Install Custom Fonts On A WordPress Site

There are pros and cons of using each of these methods for applying custom fonts into your WordPress site.

If super-fast page speeds are not a big issue, then making use of third-party repositories is often the simplest way to go.

If you want simplicity plus the benefit of fast page loading, then using a plugin like Fontsy is probably best.

Those users with technical prowess and who want full control should opt for the first method.