8 months ago
Since my last post on web fonts, a pair of new websites have launched related to the cause. One is proposing a big step forward, while the other is a nice resource.
Typekit from Small Batch Inc. aims "to develop a consistent web-only font linking license." According to their blog:
We've built a technology platform that lets us to host both free and commercial fonts in a way that is incredibly fast, smoothes out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to annoying and ineffective DRM.
With a free version promised from the outset, it sounds like a great offering. However, the mentions of a "low-cost way to grow" and "scalable professional version" leaves me a little apprehensive. I'm not making any judgments until they launch the service, but facing recurring charges for the unforeseeable future doesn't sound like the best solution.
Next, The League of Moveable Type (no relation to the blogging platform) simply provides "well-made, free & open-source, @font-face ready fonts." The fonts are available under a Attribution Share Alike Creative Commons license for personal and commercial use. Most members just want to see what you do with their fonts, but a credit in your website's colophon couldn't hurt. The files themselves are either TTF or OTF—so, you'll just need to convert an EOT for Internet Explorer using WEFT.
1 year ago
Most of us are aware of how to specify media types to serve different stylesheets; the two types most used being 'print' and 'screen'. However, it wasn't until I researched a way to specify stylesheets by device that I stumbled across Media Queries.
Media Queries is currently a working W3C draft and part of the CSS3 effort, even though it was originally submitted in 2001.
A media query consists of a media type and zero or more expressions to limit the scope of style sheets. Among the media features that can be used in media queries are 'width', 'height', and 'color'. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.
An example of how to write a media query:
<link rel="stylesheet" media="screen and (color)" href="example.css" />
Since this is a CSS3 feature, most browsers aren't going to support it yet. However, it works with Safari and should fail gracefully elsewhere. If you need to serve an iPhone-only stylesheet just set media to:
only screen and (max-device-width: 480px)
1 year ago
Using custom fonts on the web, other than the dozen or so standards faces, has been "the next big thing" for the past several years. We've been teased with the proposed ability to embed custom fonts into web pages since the CSS2 specification submitted in 1998. However, until a major font foundry or company (like Adobe or Microsoft) decides to release a new set of fonts for public use, we're probably out of luck.
sIFR, the brainchild of Shaun Inman, has filled the void. Mike Davidson and Mark Wubben have picked up the torch and run with the technology. sIFR 3.0 is currently in the works and addresses a bevy of issues, like consistent font tuning across platforms. However, sIFR is both a blessing and a curse. Since each instance of sIFR becomes an embedded Flash movie, excessive use of sIFR slows down page load. Basically, if you try to use sIFR for more than headlines, then it starts to become more of a problem. While everything is best in moderation, body copy could use a little love, too.
Most folks are waiting on the CSS3 @font-face module to gain traction, but it's wrought with the same issues as the CSS2 spec. Jon Tan covers the topic more thoroughly than I ever will on this blog, so I recommend reading his blog post Making Web Fonts Work. Essentially, it's come down to a Microsoft vs. Everyone Else issue again, with IE supporting .eot (Embedded Open Types) files and other browsers supporting .otf (OpenType Font) files.
The latest buzz has been around Cufón. As its github page describes, it provides "fast text replacement with canvas and VML." The Cufón method requires converting fonts into "a proprietary format" and then utilizing a JavaScript rendering engine to display the font in a browser. I've only tested it in Firefox, but I already prefer it's implementation to sIFR, despite the fact that the text is not selectable. Apparently, it already works well cross-browser, with some known issues.
Lastly, sIFR Lite, Facelift and Typeface.js are some other contenders. sIFR Lite is essentially just a reworking of sIFR, but object-oriented and only 3.7kb uncompressed. Sadly, each have their problems, but I'm keeping my eye on them.
It's possible we may see some kind of resolution with CSS3's @font-face in the next wave of browser updates, but it really all comes down to licensing. Until a standard is settled upon, we'll continue to bootstrap custom fonts onto the web.
Related: Read the Increase Your Font Stacks With Font Matrix article on 24 Ways and learn how to construct a "font stack."
0 comments
