Adding Custom Fonts to WordPress

If you have started to edit the CSS of your WordPress theme you probably know that you can change your font style of any site element by using the font-family selector. For instance, to change your site’s title font, you might use the following

code inside the theme style.css file:

#site-title a {
    font-family:tahoma;
}

Easy right? Sure…but what if the font you want to use isn’t included in the list of available fonts with the standard WordPress installation.

For example, if you wanted to use some really cool Seriffic font simply changing the font family as shown above is not going to work because the system doesn’t know how to render a font it’s not familiar with.

Using non-standard fonts inside WordPress requires two additional steps:

1. downloading and installing the font
2. calling the font using @font-face

Downloading Custom Fonts for WordPress

There’s no shortage of custom fonts on the web, but you must be careful where you source these files because many are littered with viruses and malware.

Generally, download fonts from: Dafont , Ffont and Google Fonts Directory.

Once you find the font you like, download it and unzip the file. You should now have access to a font file in .ttf or .otf format (more on that later), and also a readme file explaining the font’s usage and installation instructions.

To make the custom css work with your newly downloaded font, you’ll want to install it on your server or WordPress file tree somewhere it will be safe. Generally, I like to create a custom font folder within my theme file and place the custom font file there.

Once that’s done, make note of the font location/url on your site and head over to your theme’s style files for some quick editing.

 

Adding Custom Fonts to WordPress with @font-face

The CSS selector @font-face allows you to add support for custom fonts by including the font file in your CSS file. To add custom support for nearly any custom font, type the following into your site’s main style.css file:

@font-face{
font-family:seriffic;
src:url('/www/wp-content/themes/twentyfourteen/fonts/Seriffic.ttf') format ("truetype");
}

Breaking Down the Code

@font-face{
This simply tells WordPress you are going to be defining a new font face. It opens the code.
font-family: seriffic;
This line tells WordPress you will be using the font-family selector with a name of “seriffic.” Of course, if the custom font you’ve chosen is named “Lato” you’d put that in place of where I’ve written “seriffic.”
src:url(‘/www/wp-content/themes/twentyfourteen/fonts/Seriffic.ttf’) format (“truetype”);}
This next line tells WordPress where to look for the font file inside your WordPress file system.

The last part of this line tells WordPress what the format of the font file. Two popular font file formats are .ttf (truetype) and .otf (opentype). Use the one which corresponds to your particular font file.

Change Fonts with Simple CSS

If you’ve followed the steps above you should have successfully added a custom font to WordPress, which can now be called using standard CSS font selectors. Simply input the name of the new font you’ve uploaded within the font-family selector like this:

#site-title a {
    font-family:seriffic;
}

Now your new custom font has been included on your site and can be used to change any font within your site.

For more information on editing fonts in WordPress you can visit the codex entry for playing with custom fonts.