Testing web fonts
Having recently received my TypeKit invite, I went ahead and purchased the USD 25 Personal plan and font-ified my blog. TypeKit takes a very interesting approach to web fonts: you add a bit of JavaScript to your <head> tag and then manage which fonts you want to use where in the TypeKit editor.
Great fonts in the Portfolio/Performance plan
I initially found TypeKit’s font library unimpressive, but Jeff Veen was kind enough to point out that the portfolio and performance plans have more (and better, to be honest) fonts. I upgraded to the USD 50 Portfolio plan right away; it’s about twice the size, packed with great fonts.
Using TypeKit with “your own” fonts
Many of our clients will want to use their profile fonts; an option under development will allow us to purchase web licenses for the fonts we use in print, and have them served via TypeKit. Remember: we don’t buy fonts, we license them, but with webfonts, you pay as you go and you pay for use, so you get more bang for your buck. Actually, I wish print fonts worked in the same way.
Typotheque web fonts
In the meantime, I wanted to check out Typotheque’s new web font service as well. So far, I’d say that the TypeKit site itself is easier to use. They’re also leveraging their customer community (via GetSatisfaction) to their advantage. Typotheque has a great webfont FAQ, but as always, I prefer a well-formatted means of engaging with my suppliers.
Typotheque offers their entire font collection as webfonts. Their selection isn’t as large as TypeKit’s, but they are all excellent, and some have been my personal favorites for years.
I decided to use Jigsaw (you’re looking at it) across this blog for now, and simply added the font names to my CSS file – after selecting fonts to use at Typotheque (below)
I believe TypeKit also allows you to add font information directly to your CSS file, but I haven’t tried it, so I may be wrong.
Naturally, different browsers render the fonts differently.
Firefox 3.5 on Linux
Firefox 3.5 on Mac OS X
Safari 4 on Mac OS X
Which approach works best?
I tried using TypeKit and Typotheque webfonts simultaneously. It worked rather badly (that could be due to my poor coding skills) but it might mean that you have to stick with one supplier. Unless you’re a huge fan of Typotheque’s fonts (I am), you’re probably better off with TypeKit, whose library is set to grow.
Typotheque might franchise their Amazon-powered webfonts solution to small foundries (e.g. Process) or larger foundries/publishers (e.g. FontFont) – or they might all make their own solutions. Other foundries might create their own solutions for the Web Open Font Format (WOFF). Microsoft’s Embedded OpenType (EOT) format might win in the end (and it could have won, long ago, had they not had such bad manners in the 1990s and awful karma now).
Erik Spiekermann (see all his fonts at FontFont) endorses WOFF. Typotheque made their own solution. Emigré, Hoefler & Frere-Jones and the rest of the foundries who want in might make their own tools, too.
Dear WOFF: please succeed!
The creation of a webfont format that people will use and designers can make a living from has been a slow, stunted process. Technology Review gives a great overview of this débacle, you should read it.
What we need, now, is an approach that is equally exciting to type designers and type users, one where both parties win. On your computer, type works because PostScript and OpenType fonts follow a standard format; once you can pay, you can play. Fonts-as-a-service should be as simple for the designer as it has to be for the user. Creators want a font system that’s compatible with most browsers, and we want them served reliably and quickly.
If the webfont service market becomes very fragmented, we will end up selecting from a subset of high-availability fonts so that our more-gorgeous-than-ever services don’t suddenly collapse into a ghastly kaleidoscope of sans-serif when an AWS server crashes.
In some cases we’ll be able to host the fonts on our own servers, for added reliability or for internal use (e.g. your intranet). Typotheque has €1500-per-individual-font licenses that you can host yourself (I’m sure there are conditions). Still, it looks like we’re headed towards an easy, cost-effective, reliable way of getting licensed fonts onto my blog and our clients’ websites.
Learn more about web fonts & web typography
- Smashing Magazine’s Rich typography on the web is a great place to learn about the many different ways you can add fonts to yoursite.
- Zomigi’s Roundup of font embedding and replacement techniques is worth a look
- Typotheque’s web font service has great fonts and is easy to use – I hope they create a franchise that other foundries can use.
- The TypeKit web font service has lots of great fonts in the Portfolio and Performance plan
- FontDeck (not launched yet) web font service should be interesting
- .webfont was a suggestion by Erik van Blokland and
- Mozilla’s Web Open Font Format (WOFF) will hopefully suceed
- Microsoft’s Embedded OpenType (EOT) format was created in 1997. It was a proprietary format that worked for Internet Explorer only, but in 2007 Microsoft opened it up and proposed it as an addition to the CSS3 standard, something the W3C rejected for security reasons. It was resubmitted in 2008.
- Ascender Corporation recently created the EOT Lite webfont format. Similar to EOT, it does away with proprietary compression and URL binding (limits which sites you can use a font at)
- Tim Brown’s Nice Web Type aggregates the latest web font news; subscribe to his newsfeed for the latest updates.
- The League of Movable Type promotes the use of open-source fonts and has gathered a very nice collection that you can use freely. Chunk, for example, is a great slab serif.
- Zoltan Hawryluk explores the performance and development side of web fonts with @font-face in depth and More @font-face fun
- High Performance Web Sites Blog (sic!) puts @font-face and performance under the microscope, and offers some smart workarounds that keep your site fast.
2 Comments