Recap: The Changing Face of Web Typography

May 20, 2011 Samantha Metheny

For our May 4 event, Ben Byrne discussed the history of web typography and the latest and greatest approach, @font-face. If you were unable to attend or need a refresher, we've got you covered:


In the beginning

Web typography had some support in the early days of the web:

All of these had a problem, though: limited choices and limited capabilities.

Then came the workarounds

Yet these, too, had limitation and challenges.

Enter @font-face

@font-face embeds fonts in your web page via CSS:

@font-face {
	font: 'yourfont';
	src: url('fontfile.ttf') format('trutype')

More challenges

Super easy, right? Well, almost …

Leveraging @font-face

There are a number of third-party tools/services that make using @font-face easy, although they can involve costs:

Or you can do it yourself with self-hosting:

There is a lovely, amazing web site called Font Squirrel. And Font Squirrel is your friend.

Samantha's (and Ben's too) Soapbox Moment
Do not steal fonts. Just don't. If you do, the talented and ingenious font designers out there will stop designing cool fonts for us to use. When you put a font on the web using @font-face, make sure you have thoroughly read the license and obtained proper permission to use the fonts. You DO have to comply with the font foundry's license.

Looking for good web fonts?

Buyer be aware

There are some technical concerns to be aware of when using @font-face:

On the horizon

We can look forward to improvements in:

However, cross-platform rendering will still be a challenge:

Finally, for more information, Ben recommends reading @font-face and performance.

Rate Our Speaker

If you attended the event and have not yet rated our speaker, please head over to SpeakerRate and let Ben Byrne know you what thought.

Your input and feedback are essential for helping Webuquerque provide the best content possible. Be sure to tell us what you thought!


Video of the presentation is available on Vimeo:

Slide Deck

The slide deck is available on SlideShare:


Photos are available on Flickr:

Thanks to All Our Volunteers!

Webuquerque just wouldn't be the same without helping hands from our community members:

Want to help? Let us know if you'd like to lend a hand. Interested in speaking? Let us know that too!

Stay Tuned for Our Next Event!

For our June 1 event, Lori Patton and Zerek Welz will discuss how to avoid strangling your fellow teammate and finish projects with more then just spirit fingers:

Let Us Know What You Think

As always, we want to know what's on your mind so we can do the best to ensure Webuquerque is all you want it to be. Make sure to let us know if you have any suggestions, comments or complaints.