Working With Web Fonts

Do you use Windows? OMG the Internet looks ughly if you don't have Cleartype rendering enabled. Or if Web designers are using a font that isn't optimized for Web display. Or if you don't use the right format in your CSS. Or if... the list goes on.

Solution 1: When I need to be absolutely sure the fonts are going to work "as advertised" I use the service TypeKit. They save you a lot of trouble by giving you a fabulous selection of fonts which work on the Web. Yes, it's a paid service, but sometimes in Web design you need to pick your battles. There are other services too. Check out a review of font hosting services to learn about the others. (Aside: I don't use Kernest, but I do subscribe to Konstellations.)

Solution 2: Embed fonts with CSS3 @font-face rule. For this option you'll need to do a bit of extra leg work.

1. Make sure the font you want to use is appropriately licensed for embedding in Web pages. Most aren't.
2. Make sure the font is optimized for Web use. Use the generator on Font Squirrel or download one of their prepackaged font-face kits.

Once you've chosen the fonts you want to use, you'll need to set up the CSS to serve your funky fonts.

1. Create a new directory named in your theme's folder. I usually name mine fonts. Copy the fonts you're going to use into this directory. You may also want to place a copy of the font licenses into the directory for future reference.
2. Create a new style sheet to hold the font information. I usually name mine fonts.css.
3. Paste the appropriate font-face CSS into the new fonts.css file.
4. Use the new font name in your style sheets as if it were something as easy as "sans-serif."
5. Add the new style sheet to your theme by declaring it in your theme's .info file.
6. Clear the cache. Enjoy!

/* Fonts */
/* Generated by Font Squirrel from OTF fonts. */
@font-face {
font-family: 'MyNewFontName';
src: url('fonts/fontname-webfont.eot');
src: url('fonts/fontname-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/fontname-webfont.woff') format('woff'),
url('fonts/fontname-webfont.ttf') format('truetype'),
url('fonts/fontname-webfont.svg#MyNewFontName') format('svg');
font-weight: normal;
font-style: normal;
}

Troubleshooting

• If the fonts aren't available from your theme on your Web server, they won't display on your Web site.
• If the font names in the font files (eot, woff, ttf, svg) do not match the font-family name exactly, the styles won't work. Open the files in a text editor to see what the name is inside of the font file itself.
• When you add custom fonts to your site you need to test every font in Windows with Cleartype disabled. Depending on your pain threshold there may be some fonts that you're just not willing to use. It's not your fault, but you'll get blamed by your client anyway.
• Check your sizes. Some fonts are REALLY BIG and others are really tiny.

Additional Resources

• Choose your web fonts wisely
• CSS3 @font-face Design Guide. Includes tips on fall-back fonts for when @font-face doesn't work.
• Web-Safe Fonts installed on most platforms (except the one I use)
• FFFFallback. Great resource for testing fonts on your site.
• CSS Typography: Examples and tools
• Font Your Face A font browsing Drupal module.
• A review of Font Replacement Methods. Side note: I tried Cufon and didn't like it. I personally use only TypeKit or @font-face rule in CSS.