How to Use Web Fonts with WordPress

There are a ton of choices if you want to use web fonts on your website. With those choices come different methods of adding them to WordPress. Let’s do it right, and avoid problems later.

Don’t Edit These Files

Unless you wrote a theme, plugin, or the WordPress core, don’t edit it. There may come a time when it is updated, or you need support, and your changes will be overwritten, or prevent support. The WordPress API gives you plenty of ways to get things done.

The two ways to interact with WordPress are plugins and themes. Themes handle the display of content, and plugins extend WordPress’s generation of content. In the case of themes, you will want to create a Child Theme. If you are already using a child theme skin designed for a framework that may be updated, you can create a plugin.

Google Web Font fans can also use my Google Web Fonts for WordPress Plugin to take care of all of this for you. Do it yourself types, keep reading.

Importing External Fonts, The Right Way

Using most web font services, you will need to link a css file in the header. You might be tempted to just open up the header.php, and paste it in. There’s a better way.

WordPress has a bunch of “actions” it runs in a particular order. These are designated for certain tasks, like adding stylesheets or Javascript files.

Every theme must contain the function wp_head, which is what most links in the header are printed through. There are a number of other hooks that are run through wp_head. The wp_enqueue_scripts hook is specifically used for printing links to stylesheets and scripts.

A the time of writing this post, my blog uses FontDeck for font licensing and delivery. When I selected my fonts, I was given a snippet like this to put in the document head:

<link rel="stylesheet" href="FONT_STYLESHEET" type="text/css" />

** I’ve replaced the actual link with FONT_STYLESHEET.

WordPress will create the link tag, so I just need FONT_STYLESHEET. Since this is a child theme I wrote, I’ll use it’s functions.php file to add the PHP code.

Using wp_enqueue_scripts

What we’ll do is use add_action, with the hook wp_enqueue_scripts, using a PHP Closure containing the wp_enqueue_style function. We will pass wp_enqueue_style arguments to tell it what stylesheet to link.

Here it is in action:

add_action( 'wp_enqueue_scripts', function() { # Hook into wp_enqueue_scripts with a closure

    wp_enqueue_style(
        'FONT_STYLESHEET_HANDLE', # replace with a name for your font stylesheet
        'FONT_STYLESHEET' # replace with url to your font stylesheet
    );

});

Importing Fonts in Stylesheets

Another way you can import fonts, is using the @import rule to import from your stylesheet directly. You will see this option in Google Web Fonts, and some other services. It’s as easy using @import as is as pasting the snippet, but not as good for performance ( See -Yahoo Performance Rules – Choose <link> over @import ).

Import Fonts with @font-face

What you will see if you look at one of these external stylesheets is ‘@font-face’ rules, importing the fonts from the provider’s server, to the browser. You will do the same when using fonts hosted on your webserver.

Here’s an @font-face rule for one of my favorite serifs:

@font-face  {
   font-family:'ProcionoRegular';
   src:url("../fonts/Prociono-Regular-webfont.eot");
   src: local('☺'),
      url("../fonts/Prociono-Regular-webfont.eot?#iefix") format("embedded-opentype"),
      url("../fonts/Prociono-Regular-webfont.woff") format("woff"),
      url("../fonts/Prociono-Regular-webfont.ttf") format("truetype"),
      url("../fonts/Prociono-Regular-webfont.svg#ProcionoRegular") format("svg");
   font-weight:normal;
   font-style:normal
}

Javascript Font Loaders

Some web font services like Typekit use a javascript font loader to load fonts. These are a little different to implement. They will also give you a little snippet of HTML for the head of your document. Since it’s not just a single stylesheet link, we will use the wp_head hook itself to print it.

Like before, we will use add_action, but this time hook into wp_head, and use a closure for the callback to print the HTML.

Here is an example of how to implement a Typekit font kit:

add_action( 'wp_head', function() { ?>

   <script type="text/javascript" src="http://use.typekit.com/CHANGE_THIS.js"></script>
   <script type="text/javascript">try{Typekit.load();}catch(e){}</script>

<?php });

By now, you presumably have your web fonts imported, and available for use in your stylesheets, regardless if the service or method you chose to deliver them.

If you want more options for what fonts you can use, check out my article on How to make your own @font-face web font kit.