O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding fonts dynamically with @font-face

Not so long ago, we designers and developers were limited to only a select few "web safe" fonts for text. If we wanted to display text in a font face that wasn't considered "safe," we made an image out of it. It was dumb, but we had no other choice. Now we do. The font has finally been liberated on the web.

Good typography is essential to any design, and the new @font-face ability lets us embed fonts for browsers to use. Though technically not part of HTML5, this CSS3 property is much too important not to address.

Getting ready

For this recipe, let's find a fun font and embed it as a simple logo. Below you'll find links to several great sites to find both free and paid fonts for web use. For this example, ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required