Fancy Fonts Without Images or Flash: @font-face and text-shadow

This weekend I started playing around with two advanced CSS properties I had never used before -- @font-face and text-shadow. The property @font-face allows the embedding of non-standard fonts, resulting in text that is rendered normally in the browser in the font of your choice (achieving the same visual goal of more complex solutions, like sIFR). Text-shadow is a CSS3 property that adds drop shadows to text. Below are before/after screenshots showing the results of my efforts in replacing sIFR with @font-face and adding a slight shadow to the text on a film-related site I'm developing (these screenshots are from Firefox 3.6 on a PC).

text-shadow

The CSS3 property text-shadow isn't supported in all modern browsers yet (read: works in just about everything but IE), but that doesn't mean you can't start using it now. Browsers that support it will show the effect, while others will just ignore it. While it would be easy to go a little crazy with it, a subtle drop shadow on text and headers can improve legibility. In the above example, I've place a slight drop shadow on the body text and post title. Doing so was remarkably painless, achieved using the following CSS:

body { text-shadow: 1px 1px 3px #B7B7B7; }

As you can see, text-shadow accepts four values: the x-axis coordinate of the shadow relative to the text (1px), the y-axis coordinate of the shadow relative to the text (1px), the blur radius of the shadow (3px) and the shadow color.

Adjusting these, you could come up with some pretty wacky effects.

@font-face

In the first of my screenshots, the title of the blog post is rendered using sIFR. sIFR is a complex combination of Flash and JavaScript that dynamically replaces text with an embedded Flash movie, rendered in the font of your choice. Using sIFR is cumbersome — but the results are fairly impressive once it's properly configured and incorporated into your site. sIFR and technologies like it are, however, an evolutionary dead end. They were created to bridge the gap between the web as it existed at the time and whatever eventual CSS specification became the standard for embedding fonts. One possibility for that standard is @font-face.

To use @font-face, you simply put the fonts you want to use on your server, reference them in your CSS, and then use them like any other font. That's it. Easy, breezy, beautiful.

In my screenshots, you can see where I've replaced the text previously rendered by as a Flash movie via sIFR with plain, normal text rendered using the same font via @font-face. The headers are basically identical (although I will concede that Flash does a slightly better job with the anti-aliasing than the Windows XP operating system). Since the text as rendered by @font-face is just like any other bit of HTML text, it is accessible, selectable, re-sizable and requires no extra technologies (e.g. Flash or JavaScript) to be displayed.

Astoundingly, @font-face works in almost all modern browsers, including IE6. The less good news is that different browsers support different font formats, so to cover all your bases you'll need to have your font is a variety of different formats (IE only supports the Embedded OpenType format, EOT) and refer to them in your CSS in a particular manner and order. Luckily, there are generators (like this one at fontsquirrel.com) that will automatically convert your font into the necessary formats and supply you with pre-formatted CSS.

Apart from needing to have your font in several formats, the only real drawback to using @font-face is a legal one. Font licenses don't always include options for web site embedding, so it's possible that using @font-face with a font (even one you've paid for) isn't permitted. FontSquirrel.com has a great list of free fonts, and even lets you download them pre-packaged in the proper formats for use with @font-face and with the CSS already created. As mentioned previously, it also features a font format generator that will create the necessary font formats and CSS for you from fonts you already own. Another viable option is using a subscription-based font delivery service (e.g., TypeKit) that gives you access to their encrypted font library and serves the files for you.

For more detailed information on using @font-face and acquiring fonts, see "How to use CSS @font-face" at nicewebtype.com.