Day 22: Custom Fonts with FontSquirrel.com

In Custom Fonts with Google Fonts I explained how to add custom fonts from the Google Font Directory to your WordPress site. The problem with the Google Font Directory is that it only has a limited (but growing) supply of fonts and that some of them are not very nice to look at when they get rendered in live text. Fortunately there are alternatives. My favourite is Font Squirrel. Font Squirrel offers up a huge list of free fonts ready for embedding and many of them are very nice and functional. That said I recommend using some of the more extreme fonts for headings only – setting your entire text content to a handwriting font or something really big and blocky has the potential of driving your readers away.

Adding a font from Font Squirrel requires a bit more work than adding a Google Font Directory font, but don’t fret – it’s not hard at all and the end result is well worth the effort.

1. Find a font on FontSquirrel.com

An obvious question when embedding fonts in your site is “Why can’t I just add any font I want?” The answer is a bit complicated, but here is the gist of it: Fonts are intelectual property, just like a photo, a video or a piece of writing. As such the creator can decide who can and cannot use a font and what the font can be used for. Generally speaking most fonts can be used on the web in one form or another, but there are a lot of famous and popular fonts that can not be embedded in a site using @font-face. To find out what fonts can and cannot be embedded, and whether you need to pay a licencing fee to use a font you have to read the licencing agreement for that particular font. And trust me, those things are legal behemoths and no fun to read.

A better option is to safeguard yourself by only using free open-source fonts. This is where Font Squirrel comes in. When you go to the site, click on the button that says #font-face Kits. From here you can browse all the fonts Font Squirrel have found, compiled and prepared for @font-face embedding, and better yet Font Squirrel has already dug through the licences of these fonts to make sure they allow embedding. In other words someone else did all the hard work and all you have to do is use the font (even so you should read the licence just to be sure). And the best part? The fonts are (mostly) free!

So, you go to FontSquirrel.com, click on @font-face Kits and find a font you like. Now comes the fun part.

2. Get the @font-face kit

Once you’ve found a font you like, say New Athena Unicode for example, click on it and you are taken to the page for that font. From here you can look at specimens, test drive the font with your own text (good idea if your language includes weird characters like ß, æ, ø, Ã¥, or other linguistic anomalies), look at a charecter map, read the licence for that font and get the all important @font-face kit. If you are happy with your selection click the @font-face kit button. From here you can select a subset (default is usually fine) and pick what font formats to include. I recommend including all the formats to sensure that as many browsers as possible will be able to read your fonts. With all your settings done click Download @font-face Kit and you get a zipped file to be saved on your computer.

3. Using the @font-face Kit

To use the @font-face kit you need to do three things: Add the font files and font stylesheet to your site (I recommend putting them in a dedicated folder under your theme), call the custom stylesheet from your header.php file and add the call to the font from your theme stylesheet. Here is that process step by step:

First go to your theme folder and create a new folder. For future reference I recommend naming the folder the name of the font so in my case that is NewAthenaUnicode. Extract all the content from the zipped archive and place it in the new folder. Now you should have a folder with 3 or more files including demo.html, a text document with licencing information, one or more font files (ttf, eot, svg, woff) and a stylesheet named stylesheet.css.

Next you need to call the stylesheet from your header.php file. Like we did with the Google fonts open your header file and find the call to your normal stylesheet:

Create a new line directly above and insert a link to your custom font stylesheet. To make this foolproof use the WordPress template tag to define the stylesheet address and then just add the folder you created along with stylesheet.css to it. If you are working with a standard theme it will look something like this:

If you are working with a child-theme you have to use a different template tag and the code will look something like this:

Save the header.php file and upload it along with the custom font directory to your web host and visiting browsers will now call the new fonts and have them ready to be used.

The last step is to add your new custom font to styles in your theme stylesheet so they are displayed. To find the correct name for your font first open the stylesheet.css file found in your custom font directory and look at the @font-face style definition. For New Athena Unicode Regular it looks like this:

@font-face {
	font-family: 'NewAthenaUnicodeRegular';
	src: url('new_athena_unicode-webfont.eot');
	src: local('☺'), url('new_athena_unicode-webfont.woff') format('woff'), url('new_athena_unicode-webfont.ttf') format('truetype'), url('new_athena_unicode-webfont.svg#webfontTqKRtuvj') format('svg');
	font-weight: normal;
	font-style: normal;
}

What you are looking for here is the font-family name which in this case is NewAthenaUnicodeRegular. Now all I have to do is put this name into my font family calls throughout my theme stylesheet and the new font will be used. As an example to add the new font to the paragraphs of this site the p style would look like this:

p {
	font-family: 'NewAthenaUnicodeRegular', Times New Roman, Times, serif;
	font-size: 0.8em;
	color: #333333;
	margin-bottom: 10px;
	text-align: justify;
	line-height: 1.5em;
}

As you can see using custom fonts from Font Squirrel in your WordPress site is relatively easy and can give your site a whole new look. Yes, it is more cumbersome than using the Google Font Directory, but not by much, and in return you have far more fonts to choose from.

This tutorial is part of the 24 Days of WordPress series. If you want to learn more about WordPress and Expression Web check out the Sams Teach Yourself Microsoft Expression Web in 24 Hours series (version 2, 3 and 4), Lynda.com’s WordPress 3.0 Essential Training course and Microsoft Expression Web 4 LiveLessons.