Now that Firefox 3.5+, Opera 10+, Safari, and every existing version of Internet Explorer all support font-linking in one form or another, if you take the time, you can get a real feel for the future of typography on the web in a way you couldn’t do as little as 30 days ago.
I’ve spent a lot of hours surveying page after page, using Opera, then Firefox, then Safari, then IE.
It’s exciting to see font-linking finally happen. It will be a good thing for font designers, a good thing for web designers, a good thing for the browsing public – a good thing, period. A little bit of tikkun in a world where so many things remain broken. Nice.
Before getting into specifics, here’s a quick overview…
In Ya Font-Face: What’s Been Happening
- There are more and more pages using font-linking for you to evaluate. (Got links? Please comment!)
- Online font conversion tools have appeared. They will get better. And there will be more.
- In addition to hosting fonts and delivering them cross-browser, font service sites like Kernest and Typekit offer a convenient showcase for picking and choosing a font, and then previewing how it will look in your browser. Just set up an account and experiment. (Note: Typekit is still in beta but you can request a test account. Kernest is fully operational. Just set up an account and, as Kernest founder Garrick Van Buren puts it, go crazy.)
- Unexpectedly, a font design studio, Typotheque has also announced it will be offering to license, host, and serve the fonts in its own catalog. This raises awareness among font designers that the web will soon be an outlet and, hopefully, a place to focus their talents.
- An experimental version of Firefox – Firefox Minefield – with support for linking to EOT-Lite files in addition to OTF and TTF files was made available to a limited few courtesy of Mozilla developer Jonathan Kew. The possibility of Firefox supporting the soon-to-be-renamed EOT Lite, grew out of discussions on the W3C Web Fonts mailing list – all of which was prompted by Ascender Corporation’s removal of all the DRM-like aspects of Internet Explorer’s Embedded Open Type format. This promises a backwards compatible font-linking solution which will cut years and years off the time needed for font-linking to become dependable and mainstream. This is huge.
- In response to calls on the W3C mailing list for an interoperable web-specific font file standard, the WOFF format, brainchild of Mozilla developer Jonathan Kew and font designer/programmers Tal Leming and Erik van Blokland, has also found its way into a build of Minefield. However, handy conversion tools for WOFF don’t, as yet, exist. But the spec is published, and it won’t be long.
That’s the news, on to the panorama:
Web Fonts On Parade
Here’s a list of pages using font-linking. For all of them, I’ve also included the URI in text to make it easier to cut and paste into the address bars of multiple browsers. Firefox 3.5 is highly recommended. Plus, you’ll need IE for those pages linking to EOT files (at least for the moment). OK. Got your browsers open? Go!
-
@font-face: The Potential of Web Typography
http://craigmod.com/journal/font-face/
-
10 Great Free Fonts for @Font-Face Embedding
http://opentype.info/demo/webfontdemo.html
-
Using New Fonts From Kernest On Blogger
http://www.pigsgourdsandwikis.com/2009/08/using-new-fonts-from-kernest-on-blogger.html
-
Nice Web Type likes Bello and Proxima Nova
http://nicewebtype.com/fonts/bello-and-proxima-nova/
-
Nice Web Type likes Museo and Sans
http://nicewebtype.com/fonts/museo-and-sans/
-
Web Fonts Example
http://devfiles.myopera.com/articles/593/webfonts.html
-
Modular Serif B
http://www.hipertipo.org/stuff/webfonts/ModularSerif.html
-
Garrick Van Buren .com
http://garrickvanburen.com
-
http://www.typotheque.com/webfonts/sample
http://www.typotheque.com/webfonts/sample
-
http://www.typotheque.com/webfonts/multilingual_sample
http://www.typotheque.com/webfonts/multilingual_sample
-
http://www.outrasfontes.com/typekit1.htm
http://www.outrasfontes.com/typekit1.htm
-
http://www.outrasfontes.com/typekit-samples.htm
http://www.outrasfontes.com/typekit-samples.htm
-
Transcipt of Hakon Wium Lie’s Speech at the Atypi 2008 convention
http://people.opera.com/howcome/2008/atypi/
-
Cross Browser Font Embedding with the CSS3 @font-face selector
http://randsco.com/index.php/2009/07/04/cross_browser_font_embedding
This next bunch are test pages by Mozilla developer John Daggett. There are links to the EOT versions of all of these on the master page. (The .ZOT pages listed are obsolete. ZOT was a precursor to the proposed WOFF standard.)
-
http://people.mozilla.org/~jdaggett/webfonts/chunkfive-direct.html
http://people.mozilla.org/~jdaggett/webfonts/chunkfive-direct.html
-
http://people.mozilla.org/~jdaggett/webfonts/droidserif-direct.html
http://people.mozilla.org/~jdaggett/webfonts/droidserif-direct.html
-
http://people.mozilla.org/~jdaggett/webfonts/gentium-direct.html
http://people.mozilla.org/~jdaggett/webfonts/gentium-direct.html
-
http://people.mozilla.org/~jdaggett/webfonts/goudy1911-direct.html
http://people.mozilla.org/~jdaggett/webfonts/goudy1911-direct.html
-
http://people.mozilla.org/~jdaggett/webfonts/mplus-direct.html
http://people.mozilla.org/~jdaggett/webfonts/mplus-direct.html
-
http://people.mozilla.org/~jdaggett/font-face/synthetic-variations.html
http://people.mozilla.org/~jdaggett/font-face/synthetic-variations.html
-
http://people.mozilla.org/~jdaggett/font-face/synthetic-weight-style.html
http://people.mozilla.org/~jdaggett/font-face/synthetic-weight-style.html
-
http://people.mozilla.org/~jdaggett/font-face/synthetic-variations-ref.html
http://people.mozilla.org/~jdaggett/font-face/synthetic-variations-ref.html
-
http://people.mozilla.org/~jdaggett/font-face/synthetic-weight-style-ref.html
http://people.mozilla.org/~jdaggett/font-face/synthetic-weight-style-ref.html
Tip: Try Page Zooming or Text Zooming up to 125% or 150% to get a better effect on the following pages. The first page listed is a master page with notes about which fonts were used for the other pages. All of these pages are based on css Zen Garden.
- Prince Webfonts Examples – Master List With Thumbnails and Notes
http://www.princexml.com/howcome/2008/webfonts/
-
http://www.princexml.com/howcome/2008/webfonts/teng.html
http://www.princexml.com/howcome/2008/webfonts/teng.html
-
http://www.princexml.com/howcome/2008/webfonts/biue.html
http://www.princexml.com/howcome/2008/webfonts/biue.html
-
http://www.princexml.com/howcome/2008/webfonts/libe.html
http://www.princexml.com/howcome/2008/webfonts/libe.html
-
http://www.princexml.com/howcome/2008/webfonts/nels.html
http://www.princexml.com/howcome/2008/webfonts/nels.html
-
http://www.princexml.com/howcome/2008/webfonts/stef.html
http://www.princexml.com/howcome/2008/webfonts/stef.html
-
http://www.princexml.com/howcome/2008/webfonts/poen.html
http://www.princexml.com/howcome/2008/webfonts/poen.html
-
http://www.princexml.com/howcome/2008/webfonts/heid.html
http://www.princexml.com/howcome/2008/webfonts/heid.html
-
http://www.princexml.com/howcome/2008/webfonts/drim.html
http://www.princexml.com/howcome/2008/webfonts/drim.html
-
http://www.princexml.com/howcome/2008/webfonts/gald.html
http://www.princexml.com/howcome/2008/webfonts/gald.html
-
http://www.princexml.com/howcome/2008/webfonts/inel.html
http://www.princexml.com/howcome/2008/webfonts/inel.html
Pages Requiring IE or Mozilla Minefield with EOT Support
(There’s also a master page, with links to the following EOT Lite examples from Ascender Corp.)
-
http://www.ascendercorp.com/web/eot-samples/sample1/
http://www.ascendercorp.com/web/eot-samples/sample1/
-
http://www.ascendercorp.com/web/eot-samples/sample2/
http://www.ascendercorp.com/web/eot-samples/sample2/
-
http://www.ascendercorp.com/web/eot-samples/sample3/
http://www.ascendercorp.com/web/eot-samples/sample3/
-
http://www.ascendercorp.com/web/eot-samples/sample4/
http://www.ascendercorp.com/web/eot-samples/sample4/
-
fontblog (Microsoft)
http://blogs.msdn.com/fontblog/default.aspx
-
Bill Hill’s Blog
http://billhillsite.com/
-
Gentium EOT Lite Test
http://people.mozilla.org/~jdaggett/eotlite.html
Coming Up Next Soon…
The problem of FOFF – Flash Of Fallback Font-Family. Best practices for @font-face CSS syntax. Font file conversion tools, subsetting, and more.>

{ 4 comments… read them below or add one }
Nice roundup, Richard.
I’m a little surprised to hear WOFF is in Minefield. I knew there is the experimental build with EOT-Lite and webOTF/WOFF but didn’t know it had landed in trunk.
Looking forward to the rest of what you’ve got.
While I’m at it,
Have you seen a font subsetting tool? AFAIK there’s only the Web font optimizer but that only handles the fonts it provides. What’s the best practice for subsetting a font you already have?
‘Minefield’, is the code name in the Gecko world that refers to the nightly trunk builds of what will become Firefox.next. They are produced daily and do not contain the code you are talking about.
The specific Minefield build you are talking about above was a one-off, purely experimental build to show case the possibility of the whatever-it-will-be-called new web font format. It is not available anymore, and the patches that it used has since been modified, afaik – as has the spec behind the idea. I don’t think it is a good idea to spread it around…)
(I know, Roc and Jonathan mentioned all this on the www-fonts mailing list, but your readers may need read that).
@Paul Irish
>What’s the best practice for subsetting a font you already have?
That’s a top question on my how-to list. The more I’ve tested and analyzed, the more essential I think subsetting is. After all, why do I have to bloat my page when I know that all the un-editable text is covered by just the glyphs for the English alphabet? It doesn’t make sense. In fact, the Microsoft WEFT tool for creating EOT files for linking in IE will subset to the exact characters contained in the page or the entire web site, for that matter.
No, I don’t know of an online tool. Yet. But it’s only a matter of time. FontForge has the capability and it’s only a matter of adapting it. Simo Kunnen, the developer behind Cufón would be a good one to ask about this because he’s already done it, but for producing Cufón javascript “font” files, not an actual font file.
in the meantime, I’ve been using a font editing app. Easy enough to do. But then there are issues about naming and having multiple files for the same font, etc… everything has its ins and outs.
@philippe
If you don’t ask, you don’t learn! Now I know what Minefield is and the name says it all. I get the picture – the last thing I’m looking to do is create more of a mess than we’ve already got. No worries.
regards to all,
rich
{ 1 trackback }