Hello @font-face!

Posted: admin | Comments: 0 | November 12th, 2010
Nov 12

Fonts are always a hassle when designing and developing a website. The designer wants to use pretty, stylish fonts instead of the standard, out-of-the-box fonts that get shipped with a new computer. The problem here is that if your website visitors don’t have the font he uses then it will default back to one of the standard fonts (and will cause the design to suffer). As a developer, I’ve gone through many different font replacement solutions – including, but not limited to: sIFR, Cufón, Facelift, Typeface, and DTR.

Popular Font Replacement Techniques
Out of these, sIFR and Cufon come out on top for font replacement.

sIFR is a flash based method of doing font replacement, and like ALL font replacement techniques, it has downfalls. One of the main ones being that it’s flash. If you don’t have flash, it won’t render the font (plain and simple). The sIFR method also has some issues with links, transparency, z-index layering (again, mostly because its flash).

Cufón is the popular alternative to sIFR. It utilizes a generator (http://cufon.shoqolate.com/generate/), JavaScript, and HTML (Canvas) to render fonts on the page. Overall, it is a really good solution and seems to have minimal issues. It used to have many problems with “selectable” text, but this seems to have been fixed. My only beef with Cufón is the amount of JavaScript, CSS, and HTML it requires to function. When writing code for a website, I have a minimalist mindset. I want to keep my code short and simple as possible. So, for me, adding additional JavaScript to the page is less than ideal.

And then I found @font-face…

I recently came across the website font-face.com which gives a quick overview about what @font-face does. I did some more research and found people making references to CSS3-only and issues with browser compatibility. However, I did a little digging and found that even Internet Explorer 4 supported @font-face (pretty sure that’s before my time). The only catch is that it doesn’t support the typical font files (OpenType and TrueType). Aside from IE, Firefox (3.5 and up), Opera (10), Chrome, and Safari (3.1 up) all support the font-face technique.

So, how does it work?

It is completely CSS driven. All you need are multiple formats of the font and a bit of CSS code. So, for my example, I will use Century Gothic as my font. As you can see below, you need four versions of the font (.woff, .ttf, .svg, .eot). Feel free to download mine for this example.

Centurygothic.woff
Centurygothic.ttf
Centurygothic.svg
Centurygothic.eot

Next, you need a small snippet of CSS to create a new “font-family” to use throughout your CSS.

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

You are probably wondering why there is a smiley face. Instead of the smiley face, you could put the name of the actual font and if your visitor has the font on their machine, it will use it. However, there have been issues where people have their fonts named incorrectly or in different variations. To avoid issues with fonts being named incorrectly, some smart fellow came up with the smiley solution. Because no fonts have a smiley for their name, it will never default to that font and the browser will move on to use the new font we have provided. For more details on the smiley, read this.

Directory StructureI’ll explain each CSS property individually. “font-family” is going to be the name reference to your font. So, whenever you want to use the font, you will use that font-family name. The first src attribute provides a path to the .eot version of the font. The second src attribute provides paths to the rest of the fonts as well as dictating their formats. Make sure that all of your paths are correct. My example assumes that you have the directory structure shown to the left.

The font-weight and font-style properties simply reset the font back to its original style so its displayed correctly. You might ask yourself, “Why can’t I used ‘font-weight:bold’?” Well that’s because you aren’t using the bold version of the font. If you wanted to use the bold version of the font, you would need to have 4 new versions of that font. The same goes for “font-style:italic”.

E.g. Centurygothic_bold.woff, Centurygothic_bold.ttf, Centurygothic_bold.svg, Centurygothic_bold.eot

Alright, now that you have your new font-family created and ready, you can begin using it in your page. All you need to do is reference your new font-family name you created. Mine was “CenturyGothic”.

H1 { font-family:’CenturyGothic’;  }

That’s it. No javascript or additional html – it is literally just text on the page like any standard font would be. The heading tag I just created is now linked right up with the font-family I created in my @font-face code. See the finished example below!

Thank you @font-face!

PS – A tip of the hat to Font Squirrel for making this awesome generator for @font-face. You provide it a font, and it spits out all of the formats and CSS you need for @font-face.

Leave a Comment

Categories