Firefox 3.5 and the potential of Web typography
In addition to new features such as support for HTML 5, geo-location, and a noticeably faster engine, Firefox 3.5 added a new CSS rule that makes Web typography much more attractive.
@font-face is a CSS rule that allows Web designers to reference fonts not installed on end-user machines. Just as you would have a pointer to a server-based stylesheet or JavaScript file in your Web page code, you can now make reference to a hosted typeface.
You'll note that news sites such as CNET News and NYTimes.com are optimized to make Web type more readable and as stylish as possible, but there are many design possibilities via additional downloadable typefaces. (As with any linked asset, there is some level of security risk if a hacker gets their hands on the font file.)
Mozilla's John Daggett explains: Within a stylesheet, each @font-face rule defines a family name to be used, the font resource to be loaded, and the style characteristics of a given face such as whether it's bold or italic. Firefox 3.5 only downloads the fonts as needed, so a stylesheet can list a whole set of fonts of which only a select few will actually be used.
This function is something I would have expected to be commonplace by now (Safari began supporting it in Version 3.1 and Opera in Version 10) but neither have the market share to drive usage the way Firefox and Internet Explorer do. (Note: this function doesn't work in IE.)
Generally speaking, the Web browser has done a terrible job with type. We've been stuck with old standbys such as Helvetica or Times New Roman, and don't forget the oft-loathed Comic-Sans and other delightful Microsoft fonts that are often easy to read but lack any real style (Verdana, for example.)
As Ian Lynam and Craig Mod write: "Fine typography has always been one of the stumbling points of Web design. Limited at most to a handful of cross-platform specific fonts, Web designers have often found it necessary to hack their way into typographically nuanced territory."
New font possibilities won't necessarily make you more popular or a better designer, but @font-face does open the door to make Web pages much more attractive and readable without being forced in Flash or other plug-in based solutions.
This of course is provided that font developers figure out ways to make their typefaces available freely or in a manner that encourages developers to use them. From a technical perspective, Firefox 3.5 allows fonts only to be loaded for pages served from the same site. This prevents sites from freely using fonts found on other sites and gives a bit of protection, but not much.
Most commercial type foundries aren't prepared for this and generally don't have licenses that are conducive to this type of use. But there is a big opportunity to get stylish new typefaces onto browsers worldwide, provided font designers are ready to embrace an open mindset.
(Note: I recognize the irony that I can't use the @font-face tag to demonstrate. Please take a look here and here for examples.)
Follow me on Twitter @daveofdoom.
Dave Rosenberg dishes up "Software, Interrupted" with nearly 15 years of technology and marketing experience that spans from Bell Labs to multiple start-up IPOs to open-source enterprise software companies. He is co-founder of MuleSource and currently serves as the general manager of Hardy Way. He is a member of the CNET Blog Network and is not an employee of CNET. Disclosure. You can contact Dave via e-mail at softwareinterrupted@gmail.com or follow him on Twitter @dr138. 
Hopefully an IE-less Windows 7 in the EU will result in a huge uptick in non-IE browsers there. That would surely help to motivate web developers to start implementing new browser capabilities such as HTML5 video, @font-face, etc., in their website designs.
It would be nice, if Windows 7 was IE-free in the US, as well. Then, perhaps a similar effect would result.
95% of users will get Windows 7, when they purchase a new PC. The PC maker will pre-install the browser of their choice on these new systems.
The remaining 5% will be Windows 7 upgrades on existing machines. I don't know what the final EU resolution will be for this case, but you could argue that anyone capable of doing an OS upgrade is most likely technically savvy enough to figure out the browser part (e.g. downloading it to a disk, before upgrading, using ftp, etc.).
I guess that's the way it will work. It will be interesting to see what browsers the PC makers choose to install.
Expect MS to throw in incentives to the computer manufacturers to include IE instead of other browsers. (Monopolies do that all the time, recently it was found that Intel offered incentives to retailers to not stock AMD components.)
I think you'll find that they're merely mentioning it because it's new in Firefox... The people who talk about this apparently know Safari handles it!
Indeed... maybe Dave Rosenberg should read the articles that he links to.
https://developer.mozilla.org/en/CSS/@font-face
Mozilla's site clearly states that there has been support for this feature since IE 4. The feature is more limited than newer implementations, but really... IE4! I'm glad all the non-IE browsers are so innovative, too bad M$ is so stupid. Really people.... whether or not IE sucks, people should at least post accurate (and complete) information.
- by jean.luc.picard July 8, 2009 7:36 PM PDT
- It absolutely does not work in IE of any version. I have been using free fonts on the web for a few months and the only browser where it does not work is IE. IE requires a proprietary file format that does not exist and the software from M$ to convert fonts is arcane and does not work as far as I can see. I've tried. Any WebKit based browsers supports it. But NOT IE.
- Like this Reply to this comment
-
(17 Comments)