Web Development: How to Add New Fonts to WordPress

How to Add New Fonts to WordPress

Do you want to make your WordPress website stand out from the crowd?

Custom fonts are one way to give your site that unique look and feel you’ve been craving, even if you’re using the exact same theme as countless other WordPress websites.

In this article, this post, I'll show you how to add new fonts to WordPress. Even better, I’ll show you how to get your hands on thousands of free custom fonts, from two of the Internet’s most popular online font repositories: Abode’s Typekit and Google Fonts.

The Best WordPress Themes on ThemeForest

A great way to make your site look beautiful is with a professional WordPress theme. You can find thousands of the best WordPress themes ever created on ThemeForest.

Where Can I Find Free Custom Fonts?

Although I’ll be focusing on Typekit and Google Fonts, there are countless websites that offer free custom fonts. The process of adding these fonts to your site can vary, but throughout this tutorial I’ll be covering the most common methods, including using plugins and editing your website’s CSS. By the end of this tutorial, you’ll have techniques that you can apply to the majority of custom font repositories, even if they’re not explicitly covered in this tutorial.

If you already have a specific font in mind, then it’s worth booting up your favourite search engine and running a search for custom font followed by a few words that describe your ideal font, such as custom font Netflix or custom font Star Wars.

If you don’t have a particular font in mind, then Typekit and Google Fonts offer thousands of custom fonts, so these two sites should provide you with plenty of options. However, if you’ve trawled Typekit and Google Fonts and still can’t find a font catches your eye, then FontSquirrel, 1001 Fonts and FontSpace are also great places to find custom fonts.

Just don’t get carried away, as cramming your website full of third party fonts can impact its performance, and websites that are forever switching between different fonts tend to be difficult to read, and unpleasant to look at!

Adding Google Fonts to WordPress

There’s typically two ways you can add new fonts to WordPress: use a dedicated plugin, or edit your website’s CSS. In the following sections, I’ll be covering both methods.

CSS: Adding Custom Google Fonts Manually

Editing your theme’s CSS is a multi-step process, but it’s also one of the most versatile ways to import new fonts:

Head over to the Google Fonts website, and find a font that you want to use. Then click the Select this font link.

Google Fonts contains hundreds of free fonts that you can add to your WordPress website

A Family selected popup should now appear towards the bottom-right of the screen. Click it.

Make sure the Embed tab is selected, and copy the provided embed code.

In a separate tab, log into your WordPress account.

In WordPress’ left-hand menu, navigate to Appearance > Theme Editor.
Open the Select theme to edit dropdown, choose your current theme, and then click Select.
In the Theme files menu, select the header.php file.
Find the opening <head> tag, and paste the Google Fonts embed code directly after this tag.
Click Update file to complete the edit to your theme.

Now that you’ve added this font to your website, you need to define where WordPress should use it, for example maybe want to use the Google Font for your website’s body text or all h1 headings.

In WordPress’ Theme files menu, find the style.css file, and click it. Note that in some themes style.css may be stored inside a CSS folder.
Switch back to your Google Fonts tab and select @Import.
Copy the Specify in CSS code.

Select the Import link which gives you access to some CSS code

Switch back to your WordPress tab and find the section of code that represents where you want to use this font. For example, if you wanted to use the font for your website’s body text, then you’d need to locate a section of code that looks something like this:

body{ 
    margin:0; 
    padding:0;
    line-height:20px; 
    font-size:13px; 
    color:#5c5c5c; 
    font-family: 'Montserrat', sans-serif;  
    -ms-word-wrap:break-word; 
    word-wrap:break-word; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

This step can vary depending on your theme and the type of text you want to edit. If you’re struggling to work out which piece of code you need to modify, then try opening the style.css file and performing a search for font-family as this will highlight all the code that controls how fonts are used across your website.

Once you’ve identified the correct piece of code, you’ll need to replace the font-family with Google Fonts’ specify in CSS code. For example, my specify in CSS code is:

font-family: 'Indie Flower', cursive;

So I need to replace font-family: 'Montserat' in the style.css file. This gives me the following:

body{ 
    margin:0; 
    padding:0;
    line-height:20px; 
    font-size:13px; 
    color:#5c5c5c; 
    font-family: 'Indie Flower', cursive;  
    -ms-word-wrap:break-word; 
    word-wrap:break-word; 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

Once you’ve modified the code, save your changes by clicking Update File. Refresh your WordPress website, and it should now be using your new font. Note that if the font doesn’t change following a refresh, then you may need to clear your cache or view your website in an incognito tab.

WordPress

How to Clear the WordPress Cache

Jessica Thornsby

Adding Custom Fonts Using the Google Plugin

Since every WordPress theme is unique, editing a theme’s CSS files can sometimes be a challenge.

If you’re struggling to work out which piece of code you need to edit, or you simply don’t like the idea of delving into your website’s CSS, then you can import Google Fonts using the Easy Google Fonts plugin:

In WordPress’ left-hand menu, select Plugins > Add New.
Search for the Easy Google Fonts plugin, and when it appears select Install followed by Activate.
Next, navigate to Appearance > Customize.
You’ll now have access to a new Typography item. Click it.
Select Default Typography.

You can access Google Fonts entire library of free fonts by installing a dedicated plugin

Scroll the side-menu until you find the section of text that you want to edit, such as Heading 1 or Paragraphs, then open the Font Family dropdown and choose the Google Font that you want to use.

Once you’ve selected your font, you can customize it using the settings in the Appearance and Positioning tabs, for example you may want to change the font’s colour, size or spacing. When you’re happy with your new font, select Publish.

Your website should now update to use this new font.

Adding a Custom Font Using Typekit

Google Fonts isn’t the only place where you can get access to free custom fonts. Let’s look at how you can use CSS to add any font from Adobe’s Typekit repository:

Go to the Typekit website and sign up for an account.
Browse the Typekit library, and find a font that you want to add to your WordPress website.
Give the Add to Web Project button a click.
Give your project a descriptive name, and then select Save.
Push the Activate fonts slider into the On position.

Find a font you want to use and push its Active fonts slider into the On position

You’ll now need to copy/paste this font’s embed code into your website’s <head> tag. To get your hands on the embed code, navigate to My Adobe Fonts > Web Projects or access the Web Projects page directly.

Find the provided embed code and copy it—without any of the <style> tags.
In a new tab, log into your WordPress account.
In WordPress’ left-hand menu, select Appearance > Theme Editor.
Open the Select theme to edit dropdown, choose the theme you’re currently using, and then click Select.
In the Theme files menu, find the header.php file and clickit.
Find the opening <head> tag, and paste the embed code directly after this tag.
Click Update file.
Flick back to the Typekit tab, and find the following link: If you'd like to use fonts in HTML email, use the @import link. Select this link and then copy the provided import code.
Flick back to WordPress. In the Theme Files menu, select style.css.
Paste the embed code at the very start of the style.css file.

Add custom fonts to your website by editing your stylecss file

Save your changes to the theme by clicking Update File.

Now, you need to find the code that defines the font you want to change, and update it to reference your Typekit font instead.

This process will vary depending on the theme you’re using and the text you want to update, but you’ll typically need to complete the following steps:

In WordPress’ Theme Files menu, select the style.css file.
Find the section of code that you need to update; once again it may help to search for the phrase font-family as this will highlight all of your theme’s font-related code.
Once you’ve identified the correct section of code, you’ll need the CSS for your new Typekit font. In a new tab, head over to Typekit’s Active Fonts section (or navigate to My Adobe Fonts > Active Fonts.)

Head over to the Adobe Typekit website and navigate to My Adobe Fonts Active Fonts

Find the font that you want to use on your website and click it.
Scroll to the bottom of the font’s page; the How to Use section should contain a Web code. Copy the font-family section.
Switch back to your WordPress tab, and replace the font-family line with the line that you just copied.
When you’re happy with your changes, click Update File.

Check your website; it should now be using your new font!

Conclusion

In this tutorial, I showed you how to customize any WordPress theme, using the endless supply of free fonts available online.

If you’ve been following along, then you now have the entire Google Fonts and Typekit libraries to choose from. However, if you want to download a font from someone other than Adobe or Google, then you should be able to get similar results by finding that font’s embed code and pasting it into your WordPress theme files, using the instructions outlined in this article. Many large font repositories also have dedicated plugins that make it easier to add fonts to your website, so it’s always worth checking whether there's a plugin available.

Give Your Site a Makeover With a Professional WordPress Theme

Are you in the process of giving your WordPress website a makeover? Our collection of professionally-designed WordPress themes can give your website an entirely new look and feel, within minutes.