Typography on the Web
Typography on the web has evolved tremendously from its humble beginnings. In the past, websites have had to rely on a small subset of fonts, known as web-safe fonts, for their text. If you wanted to use a different font, alternative methods, such as text images, had to be employed. Fortunately, the days of web-safe fonts are behind us, but with great power comes great responsibility. Before we look to the future, its best to remember the past…
What are Web-Safe Fonts?
Each operating system available for use on personal computers has a set of pre-installed fonts. This list of fonts is not the same from one operating system to the next. Web-safe fonts are the fonts that most operating systems either have in common, or that are similar enough in appearance to be used interchangeably. A Windows computer may have Palatine Linotype installed, but a Mac may have Book Antiqua instead. For all intents and purposes, these are the same fonts. Here is the short list of websafe fonts, along with their equivalents.
- Georgia
- “Palatino Linotype”, “Book Antiqua”, Palatino
- “Times New Roman”, Times
- Arial, Helvetica
- Arial Black, Gadget
- “Comic Sans MS”, cursive
- Impact, Charcoal
- “Lucida Sans Unicode”, “Lucida Grande”
- Tahoma, Geneva
- “Trebuchet MS”, Helvetica
- Verdana, Geneva
- “Courier New”, Courier
- “Lucida Console”, Monaco
Using Other Fonts on the Web
The CSS property @font-face is the only modern method for reliably embedding fonts on a web page, and there are a couple of different ways to implement it. You can host the files on your own server, or use a web service such as Google Fonts. If you host the files yourself, there are a couple of important things to consider.
First, you need to make sure that the fonts you are using are properly licensed for use on the web. Just like with using copyrighted photos, you can get into a lot of trouble using inappropriate fonts. The second thing to consider is the different font formats. Fonts can have several extensions, including .eot, .svg, .ttf, and .woff. Different browsers and operating systems look for different font files when displaying text on the internet. Internet Explorer 6, for example, only looks for .eot fonts, regardless of other font files you may have.
Using a web service like Google Fonts takes care of these issues for you, but with the caveat that you are limited to their selection of fonts. Other services, such as the free Font Squirrel, will take any font file and generate the other required files for you to host on your own server.
How to Use @font-face
There have been many different implementations of @font-face over the years, but the method that has had the most success when it comes to compatibility is the “Fontspring Method”. Using the Fontspring @font-face syntax looks something like this:
@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'),
url('myfont-webfont.woff') format('woff'),
url('myfont-webfont.ttf') format('truetype'),
url('myfont-webfont.svg#svgFontName') format('svg');
}To use the font, just include the name you specified in the @font-face declaration in the appropriate property. Make sure to include fall-backs fonts for the rare instances where @font-face is not supported:
p {
font-family: MyFontFamily, Arial, Helvetica, sans-serif;
}This @font-face syntax covers the vast majority of browsers and operating systems when it comes to embedding fonts. One important thing to note is the importance of the “?” for the .eot file. Internet Explorer versions prior to 9 have a buggy src parser, and will attempt to load all of the font files simultaneously, resulting in an error. The question mark tricks IE into thinking the rest of the declaration is a query, and will cause IE to ignore them. The order of the other fonts doesn’t matter, so long as the .eot file is first, along with its question mark.
If you are using a service like Google Fonts, the syntax is the same, but the urls will point to Google’s servers instead of your own.
