Using Your Own Custom Web Fonts

Olde Geoff coude telle a goode tale.

It is the month of April, and you know what that means. Yes! The Canterbury Tales! Geoffrey Chaucer's most famous work of Middle English literature was set in April near the end of the 14th century. I loved reading the Tales as part of my high school literature requirements and have never forgotten them.

As a tribute to Chaucer some 600+ years later, Amphibian.com will be written in the style of the Tales for the next week and a half. It starts out with an unnamed narrator meeting up with a group of frogs in an airport. They're all travelling to the Moscone Center in San Francisco for a conference and agree to tell each other stories to pass the time. In the Canterbury Tales, it was a group of pilgrims travelling to Canterbury. If you've never read Chaucer's original, you can find it here: The Canterbury Tales.

I say all that as an introduction to the real topic of the today's post - using your own custom fonts on web pages via CSS.

I had to do this for the comics to get a font that looked Middle English. The font I'm using is, oddly enough, named Canterbury. You may be familiar with using Google Fonts to add a custom font to web pages, but they don't actually offer one in the Middle English style. That's why I had to do it on my own. It's not hard to do, and is the same method used by Google Fonts and font-based icon utilities such as Font Awesome.

The first thing you need is a font. There are many places on the web to find fonts, but make sure you are adhering to the license agreement. Some are public domain, others you have to pay for, and some are provided under one of the Creative Commons licenses. Here are some popular font sources:

• dafont.com
• 1001 Fonts
• Font Squirrel

Besides just having a font, you need to have that font 4 different ways. Each browser has its own set of supported formats, so if you want complete functionality across all browsers you'll need to have the font in EOT, SVG, TTF, and WOFF formats. You can usually find fonts in TTF or OTF formats. What if you don't have the rest? There are some free utilities on the web that can convert to the other formats for you. I used Font2Web but Font Squirrel has a similar service that I used once in the past.

Once you have all those font files, you need to define the font in your CSS. You do this with the @font-face declaration. In it, you give the font a family name and specify the URLs for the various file formats. Here is the CSS for the Canterbury font:

@font-face {
    font-family: 'Canterbury';
    src: url('../fonts/Canterbury.eot');
    src: url('../fonts/Canterbury.woff') format('woff'), url('../fonts/Canterbury.ttf') format('truetype'), url('../fonts/Canterbury.svg') format('svg');
    font-weight: normal;
    font-style: normal;
}

Note that if you use relative paths in the URLs, they are relative to the location of your CSS file. I keep my fonts in a directory named fonts which is sibling to my css directory.

Once you have your font defined, you can use it in styles by referencing the font-family name you gave it above.

.olde-text {
    font-family: 'Canterbury';
    text-align: left;
    font-size: 1.3em;
}

As you can see, it's not that hard to use your own custom fonts in web pages. It was easy to make my text use a Middle English font. What's not easy is reading Middle English and understanding what it means. But give it a try anyway in today's comic.

Amphibian.com comic for 20 April 2015