Adding Custom Fonts to WordPress with @Font-Face and CSS

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:

1
#site-title a {font-family:georgia;}

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 karate type 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, I download fonts from only two places: Dafont 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:

1
2
3
4
@font-face{
font-family:karate;
src:url('/www/wp-content/themes/thesis-bp-child/custom-1/fonts/Karate.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: karate;

This line tells WordPress you will be using the font-family selector with a name of “karate.” Of course, if the custom font you’ve chosen is named “Fruitcake” you’d put that in place of where I’ve written “karate.”

src:url(‘/www/wp-content/themes/thesis-bp-child/custom-1/fonts/Karate.ttf’) format (“truetype”);}

This next line tells WordPress where to look for the font file inside your WordPress file system. In my case, I’ve chosen to download the font and install the .ttf file within a folder named “fonts” that was placed within my theme folder. You can put your font folder anywhere you want, just make sure to use the correct url when referencing the source.

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:

1
#site-title a {font-family:karate;}

Voila! 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.

Tags ,

Comments (9)

  1. Hey thanks for this article! I think I’ve done mostly everything correctly, but there must be a glitch somewhere along the line because it’s not working.

    Here are the steps I took:

    1. Created a new folder in my theme file called ‘custom-fonts’
    2. Uploaded a file called ‘open-sans’ to the ‘custom-fonts’ file (within which are 10 .ttf files — OpenSans-Bold.ttf, OpenSans-Regular.ttf, etc.)
    3. Added the following code to my .custom-css file:
    @font-face {
    font-family:open-sans;
    src:url(‘http://fivehundreddollarwebsite.com/html/wp-content/themes/hustle/custom-fonts/OpenSans-Regular.ttf’) format (“truetype”);
    }
    4. Added the following to the custom css editor within the theme back end (WooThemes):
    .p {
    font-family: open-sans;
    }
    If you look at http://fivehundreddollarwebsite.com/using-links-in-wordpress/ you’ll see that the font is a serif font that must be some kind of default because it can’t find ‘open-sans’. I have a feeling something is off in the src:url but I don’t know what.

    Anyway, thanks for taking the time to write this and respond to comments. It’s clearly helping people! -David

    • Check your quotes in the url. Make sure they are straight quotes. Sometimes when you cut and paste quotes they come over with formatting and can mess you up. Instead of cutting and pasting try typing in the quotes and url.

  2. Just wanted to say thanks for all the useful info. I really appreciated the breakdown of the code, that really helped me understand the process more clearly. Well done.

Participate