Shaddapp@font-face!!!

Design Dev & Design
opinion

Ok, not quite in the Joe Dolce school of productivity, but this is all over the web at the moment and needs a mention.

While choosing a project for my degree, I toyed with the idea of creating a plugin for Firefox which would allow developers to include their own fonts in stylesheets and webpages by using an attribute I called “lfont” (live-font). Once I started to examine the implications of copyright and licensing with regard to the fonts, as well as the requirements for the different operating systems to implement, I quickly moved on to something else. Thankfully, someone else took up the mantle long before me and this is on the cusp of becoming a new standard.

The “@font-face” attribute was created by (prepare to be shocked) Microsoft for Internet Explorer 5.5.

That’s right, 5.5!!!

Webkit (the backbone of Safari and Chrome) has supported it for years as has Firefox. Opera is reportedly working on integrating it into it’s next release supports it since version 10 and Chrome (though built on Webkit) has resisted the integration of “@font-face” until lately (as of 18th Nov 2009, it is in dev builds and due later in the year). “@font-face” effectively lets us, the developers, use any font we like (within reason, more on this later) on any webpage and have it display properly for the user, regardless of the fonts they have installed on their machines. This applies cross-browser, cross-platform and cross-time!

So why the sudden furore? It actually hasn’t been that sudden and only recently became a furore. With the advent of HTML5 and CSS3, a big push has come from the development community to provide a standard which allows for the use of unique fonts. While there have been Flash based solutions available for a few years (sIFR, Curon, etc), these do exactly what they say on the tin, which is require the user to have Flash installed. Try telling that to someone on a mobile device. They are also cumbersome and difficult to implement. Of course, this can be done, but without the ease and universality of “@font-face”. One of the most endearing points of “@font-face” is that, though not exactly implemented in a standardised manner at the start, it is now pretty much across the board on all browsers and will be in the future, especially once CSS3 is ratified.

Implementation

It’s important to mention a little about the implementation of “@font-face”. The following code shows an example of how to declare a font in your run-of-the-mill css file:

@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘Graublau Web Regular’), local(‘Graublau Web’), url(‘GraublauWeb.otf’) format(‘opentype’);
}

(special thanks to Paul Irish for this one)

The above code allows the developer to use the ‘Graublau Web’ font within their web templates and not have to worry about whether the user has this font installed or not. Paul has two excellent articles on the matter:

http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://paulirish.com/2009/fighting-the-font-face-fout/

Both of which relate to the more specific implementation of “@font-face” and optimising it for different browsers (there are, of course, a number of tweaks that need to be made to accommodate each browser’s nuances).

None of this goes to explain though, why this “@font-face” solution has not garnered more notice until now. The reason for this is actually nothing to do with its implementation, but all to do with its support; namely, the fonts. A typeface, when it is designed, remains a product of the company that designed it and that company holds the license. Usually these fonts are licensed to providers or designers who purchase them for use in their print media. Obviously, websites are not print media, so the use of the font is not limited to one intance but multiple instances (one for every visitor to every page of every website in the world EVER!). The problem with creating a standard like “@font-face” before is that to work, the browser downloads the font from the server and runs it on the client machine. The key word in this statement is “Download” and the one which has caused all the licensing problems until now. As a result, “@font-face” can only support free and open-type fonts (Microsoft’s “.eot”, Open-type “.otf” and True-type “.ttf”). Chrome battled hard to have “.svg” formed as a new standard but fought against a growing tide and has now turned face to support the above formats. The beauty of the browser support is that, if an older version of the browser doesn’t support “@font-face”, the font will revert to whatever substitute you have suggested… but you’d need to go to IE5 for that to matter!

What has finally added to this new momentum is the provision of free and open font faces in libraries across the web. And not just one or two libraries. The number grows daily and already the number of actual fonts available online is in its thousands. While you may not find the exact font you are looking for by name, you can be sure there is a new free font out there which is very, very close and will certainly work in place of the one you chose.

This is a very exciting prospect for future web site designs. We will be able to use any font we want in any size and variation and will ultimately lead to more interesting and more stylish designs. I look forward to the implementation of it and seeing it grow and spread across the web over the coming years.

Further reading:

The @font-face website: http://www.font-face.com
Web Fonts wiki: http://webfonts.info
Mozilla Implementation Tutorial: http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
Paul Irish (very authoritive knowledge on web typography. Name’s misleading – he’s not actually Irish!): http://paulirish.com
Open Font Library (for finding fonts): http://openfontlibrary.org/wiki/Web_font_linking_with_@font-face
W3C CSS3 Font support draft (long, but if you have the time, interesting: http://www.w3.org/TR/css3-fonts/#the-font-face-rule

I’d advise to search the online font libraries (like All Fonts, Font Fonts, Dafont, etc) for free fonts that can be used as web fonts. When you explore, you’ll be amazed what’s available to you.

Comments are closed.