Slowly, but surely, web browsers are creeping towards some form of parity when it comes to using custom fonts in CSS. It's rather disturbing how long it's taken considering that dynamic fonts were possible in Netscape Navigator 4 and Internet Explorer 4.
A lot has changed since then. What used to exist as two mismatched specifications for embedding fonts (Netscape with TrueDoc and Microsoft with Embedded Open Type) is now starting to congeal towards a single standards-based solution: The CSS3 Web Fonts specification.
Slowly, but surely, browsers, and other vendors, are starting to implement this specification (especially now that its use is implied by the ACID 3 test).
The primary aspect of the web fonts specification comes down to the use of @font-face within your stylesheets. Using it you could define, and load, a custom font like so:
@font-face { font-family: "Kimberley"; src: url(kimberle.ttf) format("truetype"); } h1 { font-family: "Kimberley", sans-serif; }
There's an A List Apart article that provides a number of examples on how to use this.
The biggest gotcha to how @font-face works, though, is in what font file formats it supports. By default an implementor isn't required to support any, much like the <video/> and <audio/> elements in the HTML 5 specification.
This leads to the question: How's the browser support?
Surprisingly, Internet Explorer has had an implementation of @font-face for quite some time now (over a decade, in fact). Much of the web-fonts specification is based off of their work (and is edited by a Microsoft employee). However the only font file format that is supported is the proprietary Embedded Open Type format (although Microsoft is currently attempting to standardize EOT within the W3C).
The WebKit team has also implemented @font-face support, along with support for the de-facto TrueType file format. This is expected to make its public debut in the upcoming Safari 4 release.
The Mozilla team just landed support for @font-face, to ship in the upcoming Firefox 3.1 release (and now available in the current Firefox 3.1b1 release). Firefox also includes support for TrueType fonts and support for OpenType.
Conspicuously absent is Opera's support for @font-face. Not included in Opera 9.5 it's likely that this feature is currently slated for an Opera 10 release. While Opera hasn't, explicitly, announced their release plans they have revealed a demo of Opera receiving a 100% pass on the Acid 3 test, which implies that some portion of the web-fonts specification has been implemented.
I've pulled together some working examples, from the A List Apart article on the subject, and got them to work in both Firefox 3.1 and the latest WebKit nightly. All of the fonts used are available for free use.
Demo Page (As seen in Firefox 3.0 and 3.1 on OS X, below.)
|
|
Demo Page (As seen in Firefox 3.0 and 3.1 on OS X, below.)
 |
 |
There exists one large point of contention: How should the rights of fonts be maintained? The success of having embedded fonts on the web is largely dependent upon font vendors feeling comfortable with the inclusion and distribution of their fonts on user sites. Frequently users pay large fees for the privilege of using a font. Naturally there is a lot of contention within this space, as there is in the realm of music and video formats.
Microsoft currently supports Digital Rights Management in their Embedded Open Type font format—which is being considered by other vendors as a W3C specification.
In the mean-time Mozilla will be implementing the W3C Access Control specification for all remote files being loaded. This will allow font vendors to prevent sites from, at the very least, hot-linking to their font files (but won't prevent any explicit piracy).
If one thing is clear it's that fonts on the web can be quite messy - both in their implementation and in their standardization. Thankfully browsers are making serious headway towards a common-ground implementation. While it may not arrive soon enough for some it's eventual convergence will be appreciated by all.
reader comments