Category: WordPress
. 4 Comments
how to add custom fonts to wordpress
Fonts matter

Choosing the right font for your WordPress site is a central part of web design and website branding.

Like colors, images and other elements, typography plays a big part in how your site is perceived by visitors.

Thankfully, in WordPress fonts are one of many things that you can freely customize. You can use pretty much any free custom font on your WordPress site you want.

We will cover all you need to know about WordPress fonts:

How to Add Custom Fonts to WordPress Manually

When it comes to adding custom fonts to WordPress by hand, you have three main options: HTML, JavaScript and CSS. There are pros and cons to each method and which one is the right one for you depends on your setup. Don’t worry, we will go through each of them in detail.

1. Using CSS and @import

Let’s start with the least recommended method. If you plan to install custom typefaces from Google Fonts, you might have noticed that it has a tab labeled @import. The service gives you a piece of CSS code.

import tab in google fonts

You can either take it as it is and insert it into your header (more on that below) or copy it without the <script> brackets to the beginning of your theme’s (or better yet, child theme’s) style.css file.

/*
Theme Name: Twenty Seventeen Child
Theme URI: https://wordpress.org/themes/twentyseventeen/
Template: twentyseventeen
Author: the WordPress team
Author URI: https://wordpress.org/
Version: 1.0

*/

@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/* additional CSS goes here */

Doing so will load the font into your site from the style sheet. Seems like a simple solution, right? Why is it then the least recommended?

The reason is the performance issues. Using @import is no longer the recommended way to go because it prevents browsers from downloading several style sheets at once. The consequence: slower page loading times. Stay away from it if you can.

2. Using a WordPress Template File

A second method to get the fonts on your site is to take the code provided by the font libraries and copy it in your header.php template file. Most standard WordPress themes have it.

Make sure to place it somewhere between the <head> and </head> brackets. That way, your font will load whenever a page is loaded.

input google fonts code into wordpress header

If you are using a child theme, be sure to copy the parent theme’s header.php file into the child theme directory and make the changes in there.

Some themes come with settings allowing you to add custom code to your header and footer via the backend. This is also a viable option.

3. Using @font-face

So far, we have only talked about how to use custom fonts in WordPress that are hosted somewhere else, namely the servers of Google and Adobe. However, it’s also possible to host fonts on your own site and offer them to visitors’ browsers from there.

To do this, you first need to download the font in question. Remember the download button on Google Fonts? That one will become handy now. Other providers also let you download fonts.

When you do, make sure you get it in a web font format. That means TTF, OTF or WOFF. You will find more information about it here. If you don’t have the right web font format, you can also use this service to convert your font into supported one.

Once you have your font files ready, you need to upload them to your WordPress site via FTP. A good place to store them is in a subdirectory of your child theme named fonts (creative, I know).

After that, you need to load the font in your style sheet via @font-face. Here’s what it looks like:

@font-face {
  font-family: Roboto;
  src: url(http://localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
  font-weight: normal;
}

Remember to replace the name of the font and address for its location on your own site. After that, your new custom font will be usable.

However, this is also not the best solution, especially performance wise. Google’s servers are probably faster than yours and therefore loading custom fonts from there is likely the better solution.

4. Enqueueing Fonts – The “WordPress Way”

If you truly want to add custom fonts to WordPress in the correct way, you will use your functions.php file and the function  wp_enqueue_script or wp_enqueue_style.

With their help, we can take the code snippets provided by the font sites. However, instead of copying them into a file, we will add them to the header via a function.

What’s the difference between wp_enqueue_script and wp_enqueue_style? As their names suggest, one is for adding scripts, one for style sheets. Which one is right to use depends on how your custom fonts are provided from their source.

For example, Google Fonts gives you fonts as style sheets. In that case, you would add them to your WordPress site this way:

function add_google_fonts() {
  wp_enqueue_style( 'google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto' );
}

add_action( 'wp_enqueue_scripts', 'add_google_fonts' );

In contrast to that, fonts from Adobe Edge Web Fonts come as JavaScript. Therefore, to enqueue them on your site, the code would look like this:

function add_adobe_fonts() {
  wp_enqueue_script( 'adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js' );
}

add_action( 'wp_enqueue_scripts', 'add_adobe_fonts' );

Wasn’t so difficult, was it? Plus, you get extra points for doing it the WordPress way.

Final Step: Call the Custom Fonts in Your Style Sheet

Now that the fonts have been added to your site, you can officially use them. To do so, all that’s left is to add a declaration for the new font in your style sheet. For example, to change the font for your heading tags, you would use something like this:

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Roboto';
}

Note: Pay attention to how the service you are using specifies the CSS declaration for your fonts. On my test site, I seemingly couldn’t get Adobe Edge Web Fonts to work because they call Open Sans in CSS with open-sans as opposed to 'Open Sans' in Google Fonts.

That’s it. You now know how to add custom fonts to WordPress manually. Congratulate yourself, this is some next-level knowledge! Obviously, same actions are possible via plugins. That’s what we will talk about next.

 

Adding Custom Fonts to WordPress via Plugin

The WordPress sphere wouldn’t be what it is if there weren’t several plugin solutions for adding custom fonts to the platform. We will go over how to use Easy Google Fonts, which is one of the most popular plugins in this area.

1. Install the Plugin

The first step is installing the plugin. To do that, head on over to Plugins > Install New. Then, search for the plugin’s name. In the search results, click on Install Now and activate the plugin once it’s on your site.

2. Add/Change Fonts on Your Site

When the plugin is active, you find a new menu item called Typography under Appearance > Customize.

typography menu in wordpress customizer

When you click on it and choose Default Typography, you find a list of controls to change the font of your paragraphs and headings.

easy google fonts settings in wordpress customizer

Using them is really simple. Just click on the drop-down menu where it says Edit Font for the part of your site you want to change it for. This gives you access to this menu:

easy google fonts change font

Here, the most important part is the one under Font Family. Here, you can choose a new font type from the entire Google Font library (use Script/Subset to limit font choices to those with special characters).

The fonts are ordered by standard, serif, sans-serif, display, handwriting and monospace fonts. However, you can also simply search them by name.

When you click on a font, you can preview the changes in real time on the right.

changed custom font in easy google fonts

3. Configure the Font

Once you have chosen a font, there are many options to further customize your typography.

First of all, you can change the font weight/style under the menu of the same name. This controls the thickness of the letters.

Furthermore, under Text Decoration, you are able to add underline, strikethrough and overline. Text Transform also allows you to set it to all caps, all lowercase or capitalize every first letter. Under the Appearance tab on top, you may also control font color, background color, font size, line height and letter spacing.

appearance settings in easy google fonts

Finally, Positioning lets you change other settings such as margin, padding, border, border radius and display.

positioning settings in easy google fonts

In short, you should be able to customize the fonts on your site completely to your liking. Easy, isn’t it? Don’t forget to hit Save & Publish at the top when you are satisfied with your changes.

It’s Not Working, What Do I Do?

Sometimes you are unable to change some of the fonts on your site. That usually happens when the theme you’re using comes with non-standard CSS classes and selectors to style them.

For example, in the Twenty Sixteen theme, blog post titles are not just defined as H1 but also have a CSS class called .entry-title. For that reason, the plugin is not able to change them.

To remedy this problem, you need to create a so-called font control under Settings > Google Fonts.

add font control in easy google fonts

You can associate CSS selectors with a new control and force override when necessary. After you have done so, the new font control is available as an additional option in the WordPress Customizer under Theme Typography. Easy peasy.

Other Custom Fonts WordPress Plugins

There are also other WordPress plugins available for adding custom fonts:

  • Use Any Font — Helps you use uploaded fonts without any CSS. It houses fonts on your own server and also offers conversion tools for font formats.
  • Font Organizer — A solution for uploading fonts as well as using Google Fonts. Customize your typography at will and add several fonts at the same time. Even lets you use custom fonts inside the WordPress editor.
  • Typekit Fonts for WordPress — Use fonts from Adobe’s Typekit service (which you need to sign up for). Allows you to input embed codes and custom CSS directly in the plugin.
  • TK Google Fonts — An alternative solution to embed Google fonts that pretty much moves the Google Fonts experience to the WordPress backend. Try out fonts with a preview and custom text, then change it inside the WordPress Customizer.

Why Use Custom Fonts on Your WordPress Website

Typography is a science in itself and we won’t be able to give you a full course on the use of fonts in web design here. After all, it’s not just about the font but also its size, slant, thickness and a lot of other things. However, we can cover why using custom fonts on your WordPress site is a good idea.

Typography is Part of the First Impression

First of all, the font you use influences a lot of how your site is perceived. Is your site fun and playful? Are you a business professional? Visitors decide this within one glance and your typography plays a big role in their perception.

Fonts Have a Lot More Influence Than You Think

In an experiment, changing the typeface of a menu caused people to make different assumptions about the chef cooking the food. Those who got the menu with a fancier font associated a higher skill level than those seeing the menu in simpler typography.

Another experiment showed that people are more or less likely to believe a statement to be true depending on the font it is written in. The moral of the story: if you want to convince someone, use Baskerville.

Finally, another study showed people the same exercise instructions in different typefaces. They then asked participants to estimate how long it would take them to complete said instructions. Fascinatingly, those with the more complex font guessed it would take them longer than the group with the simpler font. As a consequence, they were less likely to follow the exercise routine.

Such is the power of fonts.

What Does That Mean for Your WordPress Website?

Do you think this could be of importance if you run a mostly writing-based website? Us too. According to the studies, the choice of font alone can determine whether visitors leave of stick around, regardless of the quality of your content.

As a consequence, your choice of fonts is a critical factor in the success of a website, not just its look and feel. Therefore, let’s have a look at where you can find custom fonts and how to get them on your site.

 

Where to Find Custom Fonts

1. Use Google Fonts to Find Custom Typography

The first service we will look at is Google Fonts. As the name suggests, it’s a service by Google that offers  800+ different fonts. Free to use. For everyone.

Here’s how to use it:

2. Find the Right Font

When you first go to the Google Fonts page (just type that into Google Search), this is what you will see:

how to add custom fonts in wordpress google fonts homepage

The user interface is made to help you find the right font for your purpose. If you already have a font in mind, you can simply type its name into the search field on the right side.

If not, you may filter the fonts in many different ways, for example, by category:

  • Serif — Meaning fonts with squiggly lines at the end, like Times New Roman.
  • Sans-Serif — Simple fonts without the squiggles, like Helvetica. The fonts used on this website are an example of that.
  • Display — Typefaces that can be used in larger sizes such as headlines.
  • Handwriting — Do you want your typography to look like it was written by hand? Then this is your setting.
  • Monospace — Typography where all characters occupy the same space, like this.

Other filters include:

  • Sorting — Sort fonts after trending, popular, date added or alphabetically.
  • Languages —Limit your font choice to languages not written in the Latin alphabet such as Arabic, Thai or Vietnamese.
  • Number of styles —Pick how many available styles you need, meaning whether a font is available in different thicknesses, italic, bold and more.
  • Thickness — Choose the desired thickness of your font.
  • Slant — Same as thickness but for the slant. It ranges from straight to almost horizontal.
  • Width — Filter fonts by the width of their letters and spacing.

When you apply any filters, your search results adjust in real time. On the left, you will see available fonts in your category and example sentences.

When you hover over a font, you can use the drop-down menus at the top to have Google Fonts display an example paragraph, the entire alphabet or numerals. You may also simply click on the sentence field and write whatever you want.

edit sample text in google fonts

In addition to that, there are options to change the font style and size. When you make changes, you also get the option to apply them to all of your search results. Finally, look at the font details page by clicking See Specimen.

font details page in google fonts

3. Add Fonts to Your Collection

If you like a particular font, you can use the red plus sign in the upper right corner to add it to your collection. Doing so will open a menu at the bottom where you see all your chosen fonts.

fonts selected in google fonts

Note that you can add more than one font family. This makes sense, for example, when you are picking one for your body copy and another for headings.

4. Customize Font Settings

Once you are satisfied with your collection, click on the bottom menu. Doing so will open this screen:

font settings in google fonts

As you can see, you can find some pieces of code to embed and use fonts on your site. This will become important later on. For now, click on the tab that says Customize. Doing so takes you to this menu:

customize fonts in google fonts

Here, you are able to select the styles of the fonts in question. This is important if you want to use fonts in different sizes, which is often the case.

However, be careful: the more styles your site has to load, the more it will slow down (Google Fonts even gives you an indication of the loading speed for your current collection at the top right). So, think about what you really need and only choose that. By the way, there are more ways you can speed up WordPress.

In case you need any other language than the standard Latin alphabet, be sure to select it at the bottom as well.

select font languages in google fonts

Besides that, all you need to know are the two arrow icons at the top.

download and share button in google fonts

The one on the left allows you to preview and share your font collection. When you choose to do so, it opens an extended page where you can insert sample text and see it in all fonts at once. This page is also good to share with people.

More important is the download button next to it. By clicking it you can download the font files to use them on your desktop machine (for example, in Photoshop). Use Skyfonts to keep them up to date.

Later, we will also show you a way to upload these files to your server and host fonts directly on your site. Keep this in mind for the future. For now, we will show you a second, similar font library.

Additional Sources for Custom Fonts

Finally, Google Fonts and Edge Web Fonts are not the only services of their kind. We have other options to find custom fonts for our WordPress sites.

  • Font Squirrel — A large collection of free fonts with different licenses. The site has many filter options including type of application, categories, number of styles and more. It also offers a font identification service. Just upload an image and find fonts that match.
  • Fonts.com 150k+ fonts for purchase for many different applications. The site often has deals on typefaces and is worth checking out.
  • MyFonts — Commercial fonts for sale. A large collection of different categories.
  • 1001 Free Fonts — Many free fonts for personal use. You are able to donate to the designer. Has many different categories and also commercial offerings.

With the above, you should be able to find something for yourself. One last tip – if you don’t know how to properly combine fonts, use Font Pair where designers have done the legwork for you.

 

WordPress and Custom Fonts in Nutshell

Fonts and typography are a central aspect of web design. They influence everything from readability to branding and the overall look and feel of a website. Plus, font-heavy designs have gotten more popular over the recent years. As a consequence, we find more and more free offers for custom fonts online.

In this article, we have covered why typography matters and how to find custom fonts on two of the most popular services for free fonts. In my opinion, Google’s solution is overall a bit more user-friendly but  Adobe’s service also works fine.

After that, we have shown you how to add custom fonts to WordPress manually and via plugins. By now, you are able to customize your WordPress site’s typography at will. This is not only great for the design but also a big leap in your WordPress skills. Good job!

Do you have additional thoughts and tips on how to add custom fonts to WordPress? If so, please share in the comment section below.


Want to ask a question or leave a comment?


Ask me anything

captcha



  • +

4 comments

Leave a Reply

Your email address will not be published. Required fields are marked *

*

  1. Very helpful and informative post, thank you.

    Quick question – if using the Easy Google fonts WP plugin, what happens if a visitor doesn’t have the font on their computer, does it load a system font instead? I wasn’t clear on how that works.

    Thanks!

    • Hey JJ, with Google Fonts the browser will load the font remotely. So, even if a visitor doesn’t have it, it will display correctly. Thanks for the comment!