Jump to: navigation or main content.

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.


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!


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

Comments (8)

What others have said about this blog post.

  1. 14 Mar 2008 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.

  2. 14 Jun 2008 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 [...]

  3. 31 May 2009 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!

  4. 15 Jun 2009 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

  5. 28 Jun 2009 Sjur Hamre said:

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

  6. 21 Jul 2009 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 [...]

  7. 23 Jan 2010 Font test: « . said:

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

  8. 28 Aug 2012 Nova said:

    I absolutely love all the new feautres like new fonts and how versatile Bitstrips is. The fact that you can embed your comics on your wiki or blog makes Bitstrips the most wonderful literacy tool there is. After making their comics, our students share them and use the embed code to publish their comics on their own wiki page. Once embedded, anyone who has access to the site can see their work. Some of the things I like about embedded Bitstrips comics are that they load very fast, use no storage space on the student page, and you can view them in full screen.

Got something to say?

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

Allowed tags: <b><i><br>