Backwards-Compatible @font-face For All Browsers

Posted By on Jan 16, 2012 | 0 comments


Definitely one of the higher-obtainables in my field, the loftiest of lofty goals, is the ability to embed fonts on a website. As it stands now, there are only about 15 different fonts (and their respective variations) available to every user on every computer. Even a first-year designer can tell you that will get pretty boring pretty fast.

Enter @font-face. A CSS specification that came about in 1998 (with the rest of CSS2), this specific declaration allows you to specify any font you can name to be used in your website. Unfortunately, this isn’t a perfect world, and just simply saying you want to use a font, doesn’t at all mean that the font will actually show up when the user visits your site. Any time a font is called in a website, the browser will check for it in the user’s computer and, if they do not have it, the browser will change your fonts to something the computer does have. Whatever it changes to, you can pretty much guarantee that you won’t like it. So, how do we get our fonts down to their computers?

Very simple: we embed them. An embedded font is a file (or files) placed on the websever with the site. When the CSS code calls for a font, the browser runs like normal, checking the user’s computer for the font. But, when it doesn’t find it, instead of defaulting to some lesser font, the browser now has another place to look: your embedded file. The browser proceeds to download and cache the font file, and you now have beautiful, custom fonts attached to any element on the site you want. Of course, no browser really is alike in how they handle these embedded files, so you have to make multiple different types of embedded fonts to cover the different possibilities.

There are at least 18 different types of embedded fonts. They include .woff (Mozilla), .dfont (Mac OSX), .suit (Mac Classic), .eot (IE), .otf (also IE), .svg (iOS, new HTML5 standard), and .ttf (Windows). Most people will not have anything besides a TrueType (.ttf) or an OpenType (.otf) font file, so you will have to convert what you have into what you need. There are many different methods, online and off, to do this. After many trials and some errors, I’ve found the best to be the online convertor at the aptly-titled http://onlinefontconverter.com/.

I’d like to credit the post at Paul Irish’s blog and the great guys over at Six Revisions for helping me learn about this subject.

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

h1 {
    font-face: 'Sketchy', 'Arial Black', Arial;
}

This code verifies with IE6+, Firefox 5+, Chrome 14+, and Safari 5+. Windows and Mac, both.

One specific tip that took me some time to figure out: SVG font files require you to denote the name of the font in the filename (notice the “sketchy-webfont.svg#Sketchy” in some declarations).

Pay close attention to the special ‘☺’ character. While it may just look pretty, this character has a very specific purpose. Most of the time, the font you choose will not be on the user’s computer or they will have it already with no need for download/embedding. Very seldom will you encounter a user who has a different font by the same name, and if this happens, you could skew the entire website. In order to fix this, we send the ‘☺’. This character is what’s called a two-byte unicode character, which is an unacceptable format in font names. Most (if not all) font files only take one-byte characters. This extra “broken” character will force the user’s computer to download and use your font, just in case they have something else.

Submit a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.