Using the @font-face tag

posted on August 1st 2009 in CSS Planeteers with 0 Comments

If you haven’t been following this little phenomenom since the intro of CSS3, you’re really missing something. This little tag has become the blessing of several end users and the curse of many type developers. If you want to get up to speed on what’s going on with this tag, hop on over to the Mozilla Development Center, then bounce over to I Love Typography to get an update. Now, if you’re too impatient to go through those well written sites, here’s what’s going on:

Almost every “structural limit” in web design has been conquered with CSS and Javascript. The final, lingering pet peeve I held on to was web fonts. There was no flexibility allowed outside of the standard browser fonts. The @font-face tag has changed that. However, it doesn’t arriveĀ  without an odor of controversy.

We’re at a stalemate. Web designers want more options, they want more fonts. Foundries do not want their uncompressed, unprotected font files uploaded to Web sites where they can easily be downloaded (downloaded is just a fancy word for stolen).

The way it works is that the @font-face tag in the CSS automatically pulls a designated font down from the server, and places it on the recipient’s computer, violating the licensing agreement of the font file. Contrary to rumor, even the designers don’t want that level of anarchy (now you gotta go read the ILT post).

The good news is that many font creators have made the leap. You can find fonts online that are designated as free (really free) and are compliant with the tag. To read more about this technology, check out some of the sites below, and give the tag a try.

Web/Graphic instructor & designer, illustrator & recovering fontaholic.

We would love to hear your comments