How to Add Custom Fonts to WordPress

Disclosure: We are a professional review site that receives compensation from the companies whose products we review. We test each product thoroughly and give high marks to only the very best. We are independently owned and the opinions expressed here are our own.

A few weeks ago I wrote an article about using custom fonts on your design projects. What I didn’t mention was how to add these custom web fonts to any websites including WordPress sites. After a reader asked about we can add these fonts to a website, I decided I would write an article listing the different ways of doing that and sharing the code needed to manually add custom fonts to your site.

Adding custom fonts to WordPress is easy and there are several ways you can do it.

Adding Custom Fonts by WordPress Plugins

WP Google Fonts

The easiest way to add custom fonts to WordPress is through the Google Web Fonts Plugin. The plugin is WP Google Fonts and it gives you access to growing library of free web fonts provided by Google. Currently Google Font Directory has 390 fonts for you to use on your on web projects!

Font Burner Control Panel

Another easy way to add custom fonts to WordPress is to use Font Burner Control Panel. This plugin allows you to add the 1000+ fonts from the Font Burner Website. All fonts are copyrighted for free use.

TypeKit

Another easy to use Plugin/Service for custom fonts is Typekit. Typekit is a free/premium service that offers custom fonts for your website. The service works great but you are limited to certain amount of page views a month. After you pass the free service plan, you have to pay a monthly fee based on how many page views you get.

AnyFont

Another Plugin to add custom fonts is AnyFonts.“Use any TrueType or OpenType fonts to replace standard fonts on your site using images or webfonts! New in 2.2.2: Use Webfonts in the WP Editor”

How to Add Custom Fonts to WordPress Manually

If adding a plugin to control your custom font isn’t for you, then you can always add your custom fonts manually.

There are two ways you can do that. One is by using Google Web Fonts and the other is by using the @font-face rule on your WordPress theme or website’s style sheet. Both ways are easy but you need to know a little CSS to do that or at least how your style sheet is setup so you can make the necessary changes.

NOTE: Before making any changes to your theme, make sure to make a backup to the files you want to modify.

Manually Add Google Web fonts to WordPress

When I first heard about Google Web Fonts, there wasn’t a plugin for WordPress, so  I had to figure out how to add the fonts to my theme. I ended up writing a tutorial on that. To see how I added Google Web Fonts to my site, check out the article How To Use Google Web Fonts on WordPress and Other Sites

Use @Font-face to Manually Add Custom Fonts to WordPress or Other Websites

@font-face is a CSS rule that allows your viewers to download your custom font from your server to properly view a webpage. But that’s only if the reader doesn’t have the font installed on their system.

To use the @font-face rule its pretty easy to use, but if you know more about CSS, you can easily add more options to display this rule differently.

First thing you need to do is upload your new fonts to your website via FTP. Create a folder called fonts and put your fonts in there. 

If you want to display the custom font on certain parts of your website then you would add the code to your style sheet. If you use WordPress go to the admin panel: Appearance >>> Editor >>>Stylesheet

@font-face {
    font-family: Ubuntu;
    src: http://www.yourdomain.com/fonts/ubuntu/ubuntu.otf;
    font-weight:400;
}

Next add the below code to the style sheet.

p {
    font-family: Ubuntu, Helvetica, Arial, sans-serif;
}

If you have the fonts stored on another domain you could use the code below. This is how I added the code to my personal site. I kept it simple and used free web fonts from Google Web Fonts. Now that I think about it, its another way to add Google Web Fonts as well. It’s a lot easier to do than I originally did it on this site but will get the results you want.

/* Import Fonts
------------------------------------------------------------ */

@import url(http://fonts.googleapis.com/css?family=Oswald);
@import url(http://fonts.googleapis.com/css?family=Ubuntu);

Then add the code:

textarea {

    color: #333;

    font-family: 'Ubuntu', Georgia, Times, 'Times New Roman', serif;

    font-size: 15px;

    font-weight: normal;

    line-height: 24px;

    margin: 0;     padding: 0;     text-decoration: none;

  
}

What I do not like about the @font-face rule is that font designers aren’t offering their fonts for free use or at least free for web use. But some premium font sites are offering this feature but at a price. So when downloading a font for your site make sure to check the licensing. Using sites like Google Web Fonts is a great option since their fonts are free to use.