One of the biggest mistakes I see with people just getting introduced to the CSS3 @font-face selector is the use of regular OTF or TTF fonts in their web pages, instead of the recommended WOFF (Web Open Font Format) and EOT (Embeddable OpenType) font formats. With traditional font formats (TTF, OTF), the primary use was for print and applications that created such documents. There were no worries about compatibility across different browsers like there are when creating websites.
Now with the large adoption of @font-face, web designers and developers have to worry about each browser viewers of their website could be using, and making sure that each font displays as it should be. This was a problem when I was redesigning my own website, http://keenanpayne.com, where you can see I used fonts not only on every page, but excessively on the homepage to create the exact feeling that I wanted without using images.
Please note that not all websites will display fonts the same way. Some browsers will display regular TTF and OTF fonts just fine, while others will give them jagged edges and make them rather unappealing. Below is an example of a website using just the TTF format of the League Gothic font viewed in Google Chrome.
As you can see, when you scale the font size up, you can clearly see all of the imperfections that appear as a result of just using the TTF. Below we have included the TTF, EOT, WOFF, and SVG version of the same font viewed in Google Chrome.
When comparing the two images, it’s hard to believe that we are even using the same font. The latter image is clear, perfectly displayed edges, and can be scaled to whatever size without any lost quality. Now let’s compare the two web pages code and see what we did differently.
First
<!DOCTYPE html>
<html lang="en">
<head>
<title>Incorrect use of @font-face</title>
<style>
@font-face {
font-family: LeagueGothic;
src: url('League Gothic.otf');
}
h1 {
font-family: LeagueGothic;
color: #ccc;
font-size: 5em;
}
</style>
</head>
<body>
<h1>Incorrect @font-face use</h1>
</body>
</html>
Second
<!DOCTYPE html>
<html lang="en">
<head>
<title>Correct use of @font-face</title>
<style>
@font-face {
font-family: 'LeagueGothic';
src: url('League_Gothic-webfont.eot');
src: url('League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('League_Gothic-webfont.woff') format('woff'),
url('League_Gothic-webfont.ttf') format('truetype'),
url('League_Gothic-webfont.svg#LeagueGothic') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
font-family: LeagueGothic;
color: #ccc;
font-size: 5em;
}
</style>
</head>
<body>
<h1>Correct @font-face use</h1>
</body>
</html>
The Solution
The solution to imperfect web fonts, or being stuck with TTF or OTF files is very simple. If you have read the license agreement to the font that you want to use and are sure you can use it with @font-face, then there are plenty of online resources that will take a regular font file, and give you a web font package with every format you’ll need to make sure it displays correctly across various browsers. Here are a few of my favorite tools to do this:
Font Squirrel @font-face Generator
The Font Squirrel @font-face generator is my favorite of all the tools. It is simple to use, generates web-safe fonts to use, and even packages in the CSS file with everything that you’ll need so you don’t even have to type any code. If you know what you’re doing it has a plethora of options including the ability to remove kerning, resize the font’s x-height, custom subsetting, and much more. It does have a list of fonts that cannot be generated so don’t go trying to get your web font version of Helvetica now.
Perhaps the most successful tool to come out of the @font-face adoption would be Typekit. Typekit allows you to browse their gallery of fonts, and embed them in your own website. The trick to doing this is they give you a snippet of JavaScript that you put into whatever web page you want the fonts on, and then you can pick out the font that you want.
Once you have picked out your font, all you have to do is type in what selectors you want it to display for (H1, classes, ID’s, etc) and then click “Publish”, and that bit of JavaScript that you inserted below will allow Typekit to override your CSS. It’s a simple and effective way to embed fonts, and is much simpler than having to store all of the fonts that you want to use, and have that ever-growing CSS file that needs editing.
The one caveat with Typekit is that it is a paid service. There is a free option, but it only allows for 25,000 page views per month, and will allow you to embed up to two fonts on one website. It will allow you to see what the service has to offer, but if you want to step up to even two websites, you’re looking at $24.99/year. Want more than two websites? That’s $49.99/year.
It’s a good cost, but if you are looking for a simple service and don’t want to get your hands dirty with code and converting fonts, then it’s definitely the way to go.
Conclusion
Both are great services for generating web-safe fonts, and I would definitely recommend Typekit if your budget allows, but I would recommend either to make sure your web designs look brilliant across all browsers no matter what.
Note: As web browsers upgrade I am sure that they will be able to handle regular OTF and TTF files and display them as they would WOFF, EOT or SVG, but this article displays best practices when using the @font-face, and should be followed even when that is the case.
