Looking for beta testers for WhizzyInvoice.com. Wanna help? Jump to: main content, navigation or the bottom.

Date:
17 December, 2007
Comments
12 comments
Posted by Stewart

Re-introducing @font-face CSS rules

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?

Typography on the web sucks

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 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

Update 08/01/2010: You have to check out these fantastic resources for @font-face:

Like this?

Share on Facebook

Share on Twitter

Share on Delicious

Digg This

Archives

Categories

Comments (12)

What others have said about this post.

  • About 4 years ago Herb Boeckenhaupt said:

    Very soon, a new website font display technology is going to be announced called: WebfontZ, that will allow the use of any TTF font in native format to be used with any platform, browser etc, without font downloads or browser plug ins or need to convert TTF to .swf, etc.. Monitor the internet for this upcoming announcement.

  • About 4 years ago Rococo CSS Font-faces | Zeltus said:

    [...] on @font-face information can be found at Qodo and at css3-info - now get ready for a deluge of eye-wateringly bad web layouts, font copyright [...]

  • About 3 years ago Art Kns said:

    My immediate reaction is "What a security hole!!!" How many new vulnerabilities and malware attacks will this enable. Download and execute what ammount to be an executable program on a client machine. Yeah, right! There's M$ (and others), have enough problems with just Javascript let alone safely handling executable code. I sure hope there is a way to globally turn it off!

  • About 3 years ago anon said:

    Clearly Art Kns is an idiot, otherwise rendering images would be a big security flaw ;) javascript doesn't have security flaws as an executed langauge is the code is being executed in a valid VM

  • About 3 years ago Sjur Hamre said:

    Opera 10 supports this feature, and I am already using it on some of my sites:)

  • About 3 years ago New Coltrane site launched | Room 34 Creative Services » Scott Anderson: Minneapolis Web Designer/Developer and Musician said:

    [...] features: it’s built with HTML 5 and the Blueprint CSS framework, and it uses the emerging @font-face CSS method to render text in a custom font. I am using the free Museo font family throughout the [...]

  • About 2 years ago CSS Wishlist: New Ideas, Debates and Solutions | CSS | Smashing Magazine said:

    [...] example is from "Re-introducing @font-face CSS rules," a great resource for learning about @font-face and its future [...]

  • About 2 years ago CSS Wishlist: New Ideas, Debates and Solutions « Tech7.Net said:

    [...] example is from “Re-introducing @font-face CSS rules,” a great resource for learning about @font-face and its future [...]

  • About 2 years ago AMB Album » CSS Wishlist: New Ideas, Debates and Solutions said:

    [...] example is from "Re-introducing @font-face CSS rules," a great resource for learning about @font-face and its future [...]

  • About 2 years ago CSS Wishlist: New Ideas, Debates and Solutions · Variedades e Bookmarks said:

    [...] example is from "Re-introducing @font-face CSS rules," a great resource for learning about @font-face and its future [...]

  • About 2 years ago CSS Wishlist: New Ideas, Debates and Solutions | WEBDESIGN FAN said:

    [...] example is from "Re-introducing @font-face CSS rules," a great resource for learning about @font-face and its future [...]

  • About 2 years ago Font test: « . said:

    [...] Read more about it here: QODO [...]

Got something to say?

Join the discussion! You know how these things work; enter your details and comments below and be heard.

If you have trouble reading the code, click on the code itself to generate a new random code.
 

Going up? Back to the top