Quick Tip: How to Work with @Font-face

Due to the fact that @font-face can be a bit overly complicated, it hasn’t caught on quite as much as it should. Once you start reading about licensing, different font formats, browser consistencies, it can potentially become more trouble than it’s worth.
But – in five minutes, I’ll try to simplify the process of working with custom fonts as much as I possibly can. Services like Font Squirrel help to make the task a cinch!

Final CSS

view plaincopy to clipboardprint?

1. @font-face {  
2. font-family: 'blok-regular';  
3. src: url('type/Blokletters-Potlood.eot');  
4. src: local('Blokletters Potlood Potlood'),  
5.  local('Blokletters-Potlood'),  
6.  url('type/Blokletters-Potlood.ttf') format('truetype');  
7. }  
8.   
9. @font-face {  
10. font-family: 'blok-italic';  
11. src: url('type/Blokletters-Balpen.eot');  
12. src: local('Blokletters Balpen Balpen'),  
13.  local('Blokletters-Balpen'),  
14.  url('type/Blokletters-Balpen.ttf') format('truetype');  
15. }  
16.   
17. @font-face {  
18. font-family: 'blok-heavy';  
19. src: url('type/Blokletters-Viltstift.eot');  
20. src: local('Blokletters Viltstift Viltstift'),  
21.  local('Blokletters-Viltstift'),  
22.  url('type/Blokletters-Viltstift.ttf') format('truetype');  
23. }  
24.   
25. h1 { font-family: blok-heavy, helvetica, arial; }  

Notice how we’re referencing both an .eot and .ttf font? This is because, of course, Internet Explorer only uses its own format, that has yet to truly catch on. As such, we must first import that .eot file, and then move on to the different formats for Firefox, Safari, etc. It’s essential that you load the .eot version first.
Next, we search for the font on the user’s computer by using the “local” attribute. If it’s unfound, only then do we pass a url that will load the font.

Why Doesn’t IE Try to Load the TTF Fonts?

This was definitely a concern. If Explorer can’t work with the truetype format, we don’t want to waste time trying to download the font. Luckily, because of all those local attributes, and the commas, IE won’t understand any of it. As such, it will simply skip the line all together, thus, only utilizing the .eot version.

• Follow us on Twitter, or subscribe to the Nettuts+ RSS Feed for the best web development tutorials on the web.