For many years now, web designers have been restricted to using a small number of fonts that are considered ‘web-safe’ due to the dependance of being available on every computer. CSS3 is changing that by introducing a method of using any font within reason. We’ll get to that later.
Very Simple
The good news is that it is a very simple method, unlike efforts such as sIFR which require both javascript and flash for implementation.
Below is the code implemented right here on Inspect Element:
@font-face {
font-family: Anivers;
src: url(../fonts/Anivers.otf) format("opentype");
}
This basically defines a font It’s important to note that you can create whatever name for the font-family property you want as this is what you’ll be referencing to further on in your CSS. In this case I’ve called it the same as the font name. Genius right? It’s best to call it by the name of the font for consistency.
Now you can reference the font-family anywhere in your CSS as you have been doing with the regular web-safe fonts. Here is an example of using this font on an H2 tag:
h2 { font-family: 'Anivers', 'Arial'; font-size: 20px; }
Interestingly the @font-face property can be used anywhere in a CSS file, even after the elements you style with it.
Browser Compatibility
Currently only Firefox 3.5 and webkit browsers such as Safari and Google Chrome will render. Of course, older browsers such as IE6 and IE7 will not support it and with IE8’s distinct lack of CSS3 features, that doesn’t support it either. Defining a second font for browsers that lack support is highly recommended. As you can see in the example above, Arial has been setup as the for those browsers to fall back on.
Examples of @font-face in the Wild
The Potential of Web Typography shows what a site can look like using @font-face for all text. Although this site’s creators claim that Firefox 3.5 displays the site as intended, I noticed that it doesn’t render the ‘x’ in Firefox at the top of the page. It renders perfectly in Safari however.
tap tap tap elegantly uses Fontin for titles.
Elliot Jay Stocks’ makes very good use of Graublau across his portfolio site.
Usage
Of course, all of this means that you can’t just use any font you want, even fonts you’ve purchased. This method makes it very easy for any visitor to extract the font in use and use it themselves. Basically stealing. Font creators work extremely hard so stick to using free fonts or fonts specifically licensed for @font-face usage.
This is a very nice feature of CSS3 which has been long since overdue, it will be great when the other browsers get on board but having firefox and the webkit browsers working is better than nothing.
Thanks for the link to webfonts.info BTW
really nice article that good for everybody to use the fancy fonts in designs. firefox 3.5 has brought a revolution in market and made other competitors to fellows ff standards
@webmasterdubai, Firefox isn’t the first browser adopt @font-face but due to the browser’s huge popularity, it’s great to see it finally supported so it will become a more commonly used technique.
Interesting article. I’ve been looking for a solution. This is getting close.
Thanks
Great solution
Cross-browser Embedding Tutorial
Using @font-face and the above tutorial, 97% of our visitors get to see our fancy CSS-embedded fonts. It’s easy, valid, no hacks, no rental fees, no flash, no javascript and no conditional comments.
Article also contains links to several online font converters (ttf2eot, otf2ttf & dFont2ttf) and an easy workflow for WEFT.
Hope this helps.
Thanks for the heads-up stk! Funnily enough one of the developers I work with pointed me to your article a few days ago as we were looking at getting an embedded font working across all/most browsers without having to create images.
The font we’re using (Diavlo) unfortunately doesn’t work with this technique but I have tested it using other fonts and it works a treat!
We decided to use Cufon to support all browsers and it works more than well enough for our needs.
Thanks once again though!
IE has supported the @font-face rule for over 10 years. Unfortunately you have to use the .eot file format for the fonts. Microsoft offers a tool to convert them, but it doesn’t work well, i suggest this site:
http://www.kirsle.net/wizards/ttf2eot.cgi
Steve is correct, theres a “Howto” guide on my blog (click my name) on how to get this working on IE6,7,8, Firefox, Chrome and Safari.
So before you knock IE, It’s been able to support custom fonts since IE 5.5, hokey?
Don’t take that as I’m an IE Fanboy though, I’ve a FireFox man forever… Just thought I should point that out to someone who perhaps should be educated