Normally, as web developers, we only have access to what’s know as “the safe seven” fonts; Arial, Courier New, Georgia, Helvetica, Times New Roman, Trebuchet and Verdana because we can guarantee the the users computer will have these fonts and that they’ll behave pretty much as expected.
But what if you want to add new fonts to your page? There are a number of ways to do this. Perhaps the most common is to use the ‘Phark’ CSS replacement technique (add a background image and shift the text out with a -9999px indent) but this won’t provide you with selectable, re-sizable or editable text.
You might choose to use flash replacement techniques such as sIFR. This will take your live text and re-render it using a flash based font set. This too has limitations; it’s incredibly difficult to make the rendered text flow properly over multiple lines and, as far as I know, there is no facility for interaction (rollovers and hover states).
The third alternative is to use JavaScript techniques like Cufon. This involves using JavaScript to trawl through the entire page looking out for elements that are marked for replacement, removing them and replacing them with the canvas html5 element containing a vector rendered version of the font you’ve chosen to use. Again there are issues around interactivity here.
The @font-face rule actually allows you to embed and use new fonts using just CSS on web pages regardless of whether the fonts are installed on the client machine. The result is live text so all your css styling and interaction can still apply as well as being editable via what ever CMS you may be using.
Cons
There is always ‘con’ to go with any ‘pro’ so here it is: Licensing. Just as with Cufon there is an issue with @font-face around font-licensing. Essentially you are making the font available to download and, quite understandably, most type foundries don’t like this so it’s important to check that the font you want to use has a license that allows you to use it with @font-face. That said, there are plenty of libraries of free fonts specifically geared to use with @font-face – some of them even give you the CSS to bring them into your page!
There is a secondary issue – the font type. You need two separate fonts; one for IE and one for everything else. IE has supported the @font-face rule since version 5 but uses its own .eot font type whereas all the other browsers that support @font-face use .ttf (TrueType). A good library will provide you with the different versions necessary for each font and sometimes a few more!
Support
The @font-face rule works with Firefox 3+, Internet Explorer 6+, Safari 4+, Chrome 8+ and Opera 10+.
Making it work
The fonts must be listed with the IE version first because IE will happily reject all other fonts but the other browsers will try to read the IE font so need to be overwritten.
@font-face {
font-family: 'DanielRegular';
src: url('/fonts/daniel-webfont.eot?') format('eot'), /* IE Font */
url('/fonts/daniel-webfont.woff') format('woff'),
url('/fonts/daniel-webfont.ttf') format('truetype'),
url('/fonts/daniel-webfont.svg#webfontYPeAOJ6I') format('svg');font-weight: normal;
font-style: normal;}
Where IE will bold or italicise any font as it comes across rules to that effect, other browsers will need weighted versions of the font to successfully carry out those rules.
In order to have more that one weight for any font you want to apply, you should have the appropriate weighted font files. The best example of this is the font “Daniel”.
“Daniel” was available in three weights: regular, bold and black so we’ll add in the other two weights.
@font-face {
font-family: 'DanielBold';
src: url('/fonts/danielbd-webfont.eot?') format('eot'),
url('/fonts/danielbd-webfont.woff') format('woff'),
url('/fonts/danielbd-webfont.ttf') format('truetype'),
url('/fonts/danielbd-webfont.svg#webfontNKM4xNMC') format('svg');font-weight: normal;
font-style: normal;}
@font-face {
font-family: 'DanielBlackRegular';
src: url('/fonts/danielbk-webfont.eot?') format('eot'),
url('/fonts/danielbk-webfont.woff') format('woff'),
url('/fonts/danielbk-webfont.ttf') format('truetype'),
url('/fonts/danielbk-webfont.svg#webfontMKaeBwW5') format('svg');font-weight: normal;
font-style: normal;}
Lastly, being “web” fonts, they don’t necessarily print – A specific print stylesheet declaring print fonts (again using the @font-face rule) may get around this but we’ll cover that in another post.
Loop 13 