Real Fonts on the Web

Backstory

Fonts on the web have been limited by licensing restrictions setup for the print era by the font foundries who create them. Only a few limiting choices have been available to designers, while print licenced fonts remained untouchable (except in images/flash).

As a result, we've been working in the "web safe" range of fonts, Times, Arial, Georgia, etc. The work around was using other fonts in images, wich comes at the cost of site speed, SEO, and flexibility.

Breakthroughs

Several solutions have emerged that allow a great variety of fonts to be legally used on the web.

Open licenses Middlemen Services How to use @font-face

This simple CSS rule references the font file. Modify size, weight, color, line-height, shadow, etc. The font stack allows fallback to safe fonts in browsers without support.

Example CSS: @font-face { font-family: yourfontname; src: url(http://www.yourfontfile); } p { font-family: yourfontname, Helvetica, Arial, sans-serif; } @font-face is supported by these browsers (and newer versions): @font-face file types vary by browser:

Services deliver the correct files for each browser, no mess. If you host your own, you'll need some help:

So, that all sound great, but what does it look like? Check out these fonts in action:

Even more info:

So, what are you waiting for? Go explore the new world of real fonts on the web!