Using Custom Fonts in WordPress

Getting a custom font into WordPress is not very straightforward. Here is a breakdown of how to quickly and seamlessly use whatever font you want on your WordPress website.

This is Arial and it kinda sucks

First, is your font available in the Google Fonts directory? If so, your life just got a whole lot easier. If not, skip down to the @font-face section.

Using the Google Fonts Plugin

If you decide you want to use a font from Google Fonts, install the WP Google Fonts Plugin. Activate it. Done? Good.

Applying a Google Font to your entire site

Go to Settings > Google Fonts and pick your favorite font from the dropdown box. To apply a font to your entire site, just check all of the boxes and then hit save. Easy peesy.

Selecting a Google font for use later

If you want to be able to use different fronts from Google, but want to be able to pick and choose when and where they show up, pick some more fonts in the following dropdown boxes, but don’t check any boxes or type anything in the code areas. Again, hit save. Jump to the TinyMCE Advanced section to integrate your extra fonts with the WordPress editor.

Using @font-face

The @font-face CSS rule has changed the face (pun intended) of web typography. For some reason, its adoption has taken a while to catch on and a lot of people are still relying on images with prerendered fonts in them or flash-based solutions like sIFR. Here’s a better way.

First, get yourself a font in either TrueType (.ttf) or OpenType (.otf) format. Let’s say you want a better alternative to Comic Sans. Check out Mighty Zeo from BlamBot, and grab the .ttf. Head on over to the Font Squirrel @font-face generator.

Font Squirrel @font-face generator

Upload your font, and leave the settings at optimal. Download and extract the zip file that it spits out. Upload the font files (all of them) to your website via FTP or similar. I recommend putting it in a subfolder of your theme. Something like wp-content/themes/twentyeleven/fonts.

Fonts in subfolder of your theme

Open up the CSS file that came in your @font-face kit and copy the section that looks like this:

@font-face {
    font-family: 'mighty_zeo_2.0regular';
    src: url('mightyzeo-webfont.eot');
    src: url('mightyzeo-webfont.eot?#iefix') format('embedded-opentype'),
         url('mightyzeo-webfont.woff') format('woff'),
         url('mightyzeo-webfont.ttf') format('truetype'),
         url('mightyzeo-webfont.svg#mighty_zeo_2.0regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Paste this code into your style.css for your theme by going to Appearance > Editor. You can just tack it onto the bottom.

Make sure that you fix the urls to point to the actual location of your fonts. Also, the font-family line is what you will use when specifying this font in your code, so make it a little more readable if you like.

@font-face {
    font-family: 'Mighty Zeo';
    src: url('fonts/mightyzeo-webfont.eot');
    src: url('fonts/mightyzeo-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/mightyzeo-webfont.woff') format('woff'),
         url('fonts/mightyzeo-webfont.ttf') format('truetype'),
         url('fonts/mightyzeo-webfont.svg#mighty_zeo_2.0regular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Hit Update File.

You can now specify your font in the html view in the WordPress editor when writing posts or pages, and it will render in your font when published. Continue on to the next step though to fully integrate your new font with WordPress.

Applying a font to your whole site with CSS

You may need to play with this a little to make it work how you want it. Go to Appearance > Editor. Find the body{} rule in the code for your theme that deals with fonts. Put the name of your desired font in front of the names of the other fonts listed. In twentyeleven it might look like this:

body, input, textarea {
	color: #373737;
	font: 15px "YOUR FONT HERE", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	line-height: 1.625;
}

You can use fonts from the Google Fonts plugin this way, and it can be applied to other custom areas, too. For example, I wanted code to be displayed in Droid Sans Mono, so I added Droid Sans Mono to my Google Fonts plugin, without checking any of the boxes or putting anything in the code box. Then I edited my style.css to look like this:

pre {
	background: #f4f4f4;
	font: 13px "Droid Sans Mono","Courier 10 Pitch", Courier, monospace;
	line-height: 1.5;
	margin-bottom: 1.625em;
	overflow: auto;
	padding: 0.75em 1.625em;
}

Using custom fonts in posts and pages with TinyMCE Advanced

To make it easier to actually use your fancy new fonts, you will want to have a friendly font dropdown box in the editor, like you would in Word. This is especially useful if you have less tech savvy users on your site and you want them to be able to use cool fonts.

Start with the TinyMCE Advanced plugin. Install and activate.

Go to Settings > TinyMCE Advanced. Drag and drop the buttons around until you are satisfied with the results, and make sure the Font family dropdown is in there somewhere. Hit save at the bottom.

You have just upgraded your editor, but your new fonts won’t show up quite yet. To use them in the editor, go to Appearance > Editor and then open up Theme Functions (functions.php). At the bottom, paste in this code (found here):

add_filter('tiny_mce_before_init', 'restrict_font_choices' );
function restrict_font_choices( $initArray ) {
    $initArray['theme_advanced_fonts'] =
        'Andale Mono=andale mono,times;'.
        'Arial=arial,helvetica,sans-serif;'.
        //'Arial Black=arial black,avant garde;'.
        'Book Antiqua=book antiqua,palatino;'.
        //'Comic Sans MS=comic sans ms,sans-serif;'.
        'Courier New=courier new,courier;'.
        'Georgia=georgia,palatino;'.
        'Helvetica=helvetica;'.
        //'Impact=impact,chicago;'.
        //'Symbol=symbol;'.
        'Tahoma=tahoma,arial,helvetica,sans-serif;'.
        'Terminal=terminal,monaco;'.
        'Times New Roman=times new roman,times;'.
        'Trebuchet MS=trebuchet ms,geneva;'.
        'Verdana=verdana,geneva;'.
        //'Webdings=webdings;'.
        //'Wingdings=wingdings,zapf dingbats'.
        '';
    return $initArray;
}

Add a line for each font that you want to be able to select in the editor, and comment out anything you don’t want to see with a “//”. You will notice that Comic Sans has already been commented out. You’re welcome. The text to the left of the equal sign is what will display in the editor and the font names go on the right. You can specify fallback fonts in case your font gets broken for some reason by entering a comma separated list. For example:

//Add custom font Mighty Zeo to your font list
'Mighty Zeo=Mighty Zeo;'.

//Specify Comic Sans as a fallback for Mighty Zeo
'Mighty Zeo=Mighty Zeo,comic sans ms,sans-serif;'.

Entries will show up in order, so you can put your favourites at the top or alphabetize them as you see fit.

You can also specify fonts that you have added with the Google Fonts plugin. Just enter the name as it appears in the plugin and you are good to go.

Enjoy

Now that you can use custom fonts on your site, use them.

This is Comic Sans. It sucks and you will be laughed at for using it.

Try something like Mighty Zeo if you absolutely must use a comic font.