The secrets to using custom web fonts

If you are a web designer then you’re already fully aware of the limitations surrounding the usage of fonts on the web. For years we have basically had two reliable options, use a standard web based font that is included on most operating systems with a few fall back fonts, or images. For headlines, custom fonts and anything fancy images were the only way to go, but that’s all about to change.

Start using awesome custom web fonts today!

A quick recap

Several older embedding options exist that have been around for awhile. Scalable Inman Flash Replacement (sIFR) which requires the Flash plugin and is thus in my opinion less desirable option, is one of them. There are also server side font replacement implementations where graphics are generated and then served to the web browser, but again this requires multiple technologies to work and has many limitations.

Cufón, a Javascript solution

A more recent technology advance in fonts is Cufón. Cufón requires no flash install and no extra software on the server side. It’s a pure JavaScript implementation and converts fonts into inline graphics. To a screen reader or web crawler the text looks like plain HTML text as you apply Cufón to the HTML text elements you wish to replace. This is one of the best font implementations yet, but it still has several limitations and caveats.

1. You cannot select or copy any of the text that has been replaced with Cufón. This is minor, but still a usability issue since the user expects to be able to copy and paste text if they want.
2. You cannot user your browsers page search for Cufón replaced text.
3. Cufón does not support rollovers, so you cannot apply a hover to your links. This is a little more of a deal breaker since many navigation toolbars require rollovers.
4. It is illegal to embed many fonts with Cufón since you are distributing the actual font data in a javascript file. This is not an issue with Flash since the actual font data is not being distributed. Cufón can encrypt the font data, but you will still be in violation of many font license agreements.
5. Knowing which fonts you can legally embed is a bit of a nightmare since the legal jargon on many font foundries will just leave you confused.
6. You must upload your fonts to the Cufón site and generate a JavaScript version of your font. This is time consuming and one extra step.

Welcome to Google web fonts

Google web fonts solves five of the six issues listed above.

1. You can select and copy / paste any of the fonts.
2. You can search for the fonts with your browsers page search.
3. Hover link rollovers are fully supported.
4. All of the fonts in Google web fonts are free to use and eliminate the research or guesswork needed.
5. Once you choose the font you would like all you have to do is copy and paste the generated code into your HTML document.

The fonts are CSS based, and the concept of CSS linked fonts has been around since 1998, but it hasn’t been until recently that you could guarantee most users would have browsers that could see these linked fonts.

Why Google Fonts? It’s fast and super easy!

Go to Google web fonts and browse the many fonts until you find one you like. Select it and launch the Google font previewer, here you can tweak the font and even add CSS text shadows. At the bottom of your previewer you will see a CSS snippet. Copy that and past it into your style sheet and you’re done, all your fonts will be like the one in the previewer.

Of course you probably don’t want to apply it to your entire site. In the case above it would probably be best to apply the style only to HTML header tags, so you could change the body tag to h1 or even use a class. For the example below I just created a google class.

Josefin Sans is just one of the many great fonts available at Google web fonts.

<link href="http://fonts.googleapis.com/css?family=Josefin+Sans:100,100italic,300,300italic,400,400italic,600,600italic,700,700italic" rel="stylesheet" type="text/css" />
<style type="text/css">
.google {
     font-family: 'Josefin Sans', serif;
     font-size: 36px;
     font-style: normal;
     font-weight: 400;
     text-shadow: none;
     text-decoration: none;
     text-transform: none;
     letter-spacing: 0em;
     word-spacing: 0em;
     line-height: 1.2;
}
</style>

And that’s about all there is to using Google fonts, it’s quick and easy.

What platforms does Google fonts support?

Going forward pretty much everything is going to support CSS based fonts, but here are the versions that support Googles method.

• Google Chrome: version 4.249.4+
• Mozilla Firefox: version: 3.5+
• Apple Safari: version 3.1+
• Opera: version 10.5+
• Microsoft Internet Explorer: version 6+

Can I download them and use them in a graphic applications like Photoshop?

Yes, while you don’t need to actually download them in order to use them on a website, you can download all of the Google Web Fonts if you like and use them in your favourite graphics package.

@font-face; another great method for using custom fonts

You can use download Google web fonts, The League of Movable Type fonts, or any web licensed fonts and use the @font-face method. In fact this is a very viable method now that most browsers support. OTF fonts will be supported in all the browsers that Google Web fonts are supported in, and in some cases all the way back to IE4. The only real difference with Google Web fonts is the ease of use and convenient library, but feel free to download any fonts you want and use this method if you prefer. @font-face also has all the same benefits that were listed for Google web fonts.

How to use @font-face

Using css linked fonts is pretty easy and has been around since 1998. Today most browsers support them, so go nuts. First download a the font you like, it must be web licensed so grab one from Google web fonts or The League of Movable Type. Once you have done that you will need to upload the actual font to your web server.

ORBITRON A high impact font with four 4 styles from The League of Movable Type.

ORBITRON black.

ORBITRON bold.

ORBITRON medium.

ORBITRON light.

The CSS for above example although long is quite simple. @font-face declares your font-family name and src (source) path to where the font is located on your server. Once they are set up you can start creating css classes or styling any HTML elements as you normally would. The example above is shown below.

@font-face {
     font-family: "Orbitron-Black";
     src: url("PATH_TO_FONT/orbitron-black.otf");
}
@font-face {
     font-family: "Orbitron-Bold";
     src: url("PATH_TO_FONT/orbitron-bold.otf");
}
@font-face {
     font-family: "Orbitron-Medium";
     src: url("PATH_TO_FONT/orbitron-medium.otf");
}
@font-face {
     font-family: "Orbitron-Light";
     src: url("PATH_TO_FONT/orbitron-light.otf");
}
.orbitron-black {
     font-family: "Orbitron-Black", serif;
     font-size:18px;
}
.orbitron-bold {
     font-family: "Orbitron-Bold", serif;
     font-size:18px;
}
.orbitron-medium {
     font-family: "Orbitron-Medium", serif;
     font-size:18px;
}
.orbitron-light {
     font-family: "Orbitron-light", serif;
     font-size:18px;
}

Other options for web licensed fonts

TypeKit is one of the commercial options with yearly pricing options and a limited free option. You can find commercial fonts here, but unfortunately a lot of the big names are missing. A quick search for favourites like Gotham, Helvetica Neue and Frutiger yielded nothing, so for now I’ll be sticking with Google web fonts and The League of Movable Type.

The future is digital

It’s quite annoying that the large font foundries have locked down and prohibited the use of their fonts on the web or only allowed clunky implementations. It’s as if they believe that if they were to open up their licenses that the world would cease to buy fonts tomorrow. I think it would be quite the opposite. Individual sites that want to embed fonts regardless of whether they own the rights to them or the licensing restrictions are going to use them. Larger corporate sites and individual sites that respect the copyright of fonts will instead move to the quickly growing library of web licensed and free fonts. The future is digital, and the larger foundries really need to wake up before people just move elsewhere for their fonts.