Decoding Web Fonts With ‘What Font’

Scott Gilbertson — Fri, 08 Apr 2011 13:44:27 +0000

What Font shows you which font a webpage is using

Designers have been bemoaning the state of typography in the browser since the dawn of the web. However, CSS 3 and the @font-face rule go a long way toward improving your font options. Throw in tools like lettering.js and easy-to-use font services like TypeKit and it’s not hard to turn your site into something from a typography nerd’s fantasies.

The days of only six font choices on the web are, thankfully, well behind us. Now you can choose from hundreds of fonts, whether you embed your own or use a service like Typekit. We see gorgeous typography on different sites everyday and sometimes we’re left wondering, what is that cool font?

That’s why we’re loving the What Font bookmarklet from developer Chengyin Liu. What Font is a little JavaScript bookmarklet you can add to your favorite browser and then, when you want to know which font a site is using, just click the bookmark and hover the text in question. What Font will hover a small transparent overlay with the typeface name (see screenshot above).

To try it out, head on over to Liu’s site and drag the bookmarklet to your browser’s bookmarks bar.

It’s worth noting that you can get the same information from Firebug or the WebKit Inspector, but What Font doesn’t have the interface overhead of Firebug or WebKit’s developer tools — it just does one thing and does it well. Couple the What Font bookmarklet with FontFonter and you can preview your website in your favorite new font in no time.

See Also:

Dealing With the Dreaded ‘Flash of Unstyled Text’

Scott Gilbertson — Mon, 17 May 2010 19:30:08 +0000

That's a fancy-lookin' T you got there.

The use of custom fonts on the web is finally a viable option for designers.

Browser support for CSS’s @font-face rule is pretty solid — even IE 5 can be wrangled into displaying custom fonts loaded from your server. Services like Typekit, which licenses fonts from well-known font foundries, and free services like Font Squirrel are helping to smooth the licensing issues surrounding custom fonts on the web.

However, while browser support and licensing is getting sorted quickly, there’s still one big problem with web fonts — the dreaded “Flash of Unstyled Text,” or FOUT.

The problem (despite the name, it has nothing to do with Adobe Flash) stems from how browsers render a page: progressively, prioritizing the raw content, then grabbing the stylesheet and then grabbing any external font files. The actual FOUT effect can be seen in the wild, but it varies by browser.

Internet Explorer will load the font file as soon as it encounters the @font-face in your CSS, which minimizes FOUT. However, make sure to put your @font-face declaration above any script tags, otherwise IE will hold the entire page until the font loads.

Safari and Chrome (and other WebKit browsers) hide any text styled with @font-face until the font is fully loaded. This means your styled text content is invisible at first, and then pops onto the screen later, after the font file loads.

Firefox loads all your text normally and displays it using a fallback font. Then, a half-second or so later, that text is “upgraded” when the custom font data is loaded. The result is a jarring font change, much like older, Flash-based font solutions. Mozilla is currently treating this behavior as a bug in Firefox. Mozilla plans to adopt the WebKit-style rendering in the future.

Obviously none of these cases is ideal, and the little loading hiccup, no matter what form it manifests itself in, is noticeable even to the most oblivious of web users.

FOUT sucks. So, what do you do? There are a variety of techniques that can be used to minimize — and even eliminate — the FOUT.

First, limit your pages to only one or two external fonts. While the golden age of custom fonts has indeed arrived, try not to abuse the machinery.

Another obvious solution is to minimize the size of your included font file. This starts with choosing fonts with smaller payloads when possible. Not all font packages are equal — when it comes to the web, stick to fonts in the kilobyte range rather than some of the bigger, multi-megabyte files out there.

If your server supports it, be sure to serve your font files using gzip compression. Read developer Stoyan Stefanov’s great article on gzipping font files. His tests show a 45-to-70 percent reduction in file size when using gzip to serve font files. If you’re using WOFF-formatted fonts, you can skip this step, because WOFF already includes compression.

So you’ve selected small font files and only a couple of varieties, and you’re serving them with gzip compression. But you’ve still got a FOUT. What to do?

Start with heavy caching. Set your expires header to something in the very far future, which will cause the browser to cache your font files almost indefinitely. It won’t help for the initial page load, but subsequent loads will happen faster.

Then you can get even trickier — but caution, for here be dragons. None of these techniques is 100 percent effective, and all have drawbacks like slower page-load times and incomplete browser support.

One way to trick the browser into downloading the font file sooner is to use the font declaration to style the tag. For example, say you have an @font-face declaration in your stylesheet and a class “myfont” that uses it. Apply that class to the HTML element like so:

As per the CSS spec, @font-face does not cascade, so the whole page won’t inherit the font. But both Firefox and Opera will load the font file much sooner. Unfortunately, WebKit browsers will not.

You can trick WebKit browsers into loading the font sooner by adding an element to the head of your page. Developer Paul Irish has an example of this in a post on @font-face. Irish points out that adding a tag to your header will cause WebKit to download the font file:

download please

The problem is that obviously this is not valid HTML, and most browsers will render the element in the document body when the page loads, so you need to remove or hide it. Although it may work, we don’t suggest using this technique unless absolutely necessary.

Another possibility is to hide the entire page until the font file loads. This is one the solutions TypeKit has started to use, adding a new class to the page body tag when the font files have been loaded. Just hide the body tag, then set the loaded class to “visible,” and you’ll avoid the FOUT.

Of course, this method avoids the FOUT by holding up the entire page, which may not be the best solution.

The final — and perhaps most useful — solution to FOUT is to simply learn to live with it. Browsers load fonts in roughly the same way they load images. Slow internet connections have always meant progressive page loads, with elements staggering in as the browser draws the page.

With more and more sites adopting @font-face, services like Typekit and other custom web-font solutions in spite of the Flash of Unstyled Content, more users will become accustomed to the hiccups. This will make your own site stand out less.

These solutions aren’t perfect, but when has the web ever been a source of perfection?

See Also:

Webmonkey » @font-face

Decoding Web Fonts With ‘What Font’

Dealing With the Dreaded ‘Flash of Unstyled Text’