Re-introducing @font-face CSS rules

• December 17th, 2007
• Posted by Stewart
• Permalink
• 2 Comment(s)

With the recent news that WebKit based browsers will soon be supporting the long awaited @font-face CSS rules, now is the time to refresh your memory on why this really is such a huge step forward for typography on the web. So how long before this becomes standard on all browsers and when can we start using it?

The web has always been quite restrictive for typography as you can only use the fonts that the user has on their machine and there haven’t been any real solutions to displaying your design as it was intended - with the correct fonts. The @font-face rule in CSS was intended to allow you to upload your own font and simply link to it from within a CSS stylesheet. Unfortunately, this wasn’t widely implemented and we’re still stuck with the default fonts until that changes.

The history of @font-face in CSS

What is it?

Ever since the CSS 2 specification back in May 1998 there was quite a bit of interest in being able to embed your own fonts on the pages using the @font-face rule. This was intended to allow the viewer to see your design as you created it. This unfortunately was not widely implemented on all browsers and was later removed from the recommendation is CSS 2.1.

The @font-face rule is currently part of the CSS3 working draft so there is a real chance that this could be here to stay.

Internet Explorer’s limited support

Internet explorer has limited support to embedded fonts called WEFT which allows you to convert true-type fonts into a file that is supported in internet explorer.

http://www.microsoft.com/typography/web/embedding/weft3/

What are the alternatives?

Well how about sIFR - the inline Flash/JavaScript text replacement that allows you embed your fonts on any browser that supports Flash and JavaScript. It’s got some weight behind it and is also used by some fairly large website such as T-Mobile. It’s not too difficult to set-up and has been the only reliable way of getting your fonts on the page without using images - and it validates too!

So, how do you use @font-face?

Here’s an example of how to use @font-face taken from the W3C 2.0 spec:-

@font-face {
font-family: "Robson Celtic";
src: url("http://site/fonts/rob-celt.ttf")
}

body {
font-family: "Robson Celtic", Arial, sans-serif;
}

This would tell the browser to use the font you have specified. You can also link to fonts that are on other domains which brings me onto one of the disadvantages of this method; copyright. Almost all of the fonts you have bought are copyright. You are not allowed to distribute the fonts and using this method means that anyone could link directly to your font and download it.

So here we have a problem. Either we use open source fonts or we have to find a way of encoding font files so that they are not distributed.

Final thoughts

I really hope that this will begin to increase in momentum so that we can finally get some nice looking fonts on our websites - watch this space!

Resources

• W3C technical spec for @font-face: http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions
• A List Apart: http://www.alistapart.com/articles/cssatten
• Microsoft: Web Embedding Fonts Tool: http://www.microsoft.com/typography/web/embedding/weft3/