I don’t think there’s much debate that the growing popularity of @font-face has been a strong step forward for web typography. Not only has it allowed designers previously constrained to a limited set of typefaces to be more creative and effective with their online designs, but it has also encouraged a proliferation of high-quality, free fonts available for use on websites. There are a few shortcomings with @font-face compared to other web typography services such as TypeKit – we’re limited to using fonts with the appropriate licenses, and there are a lack of multiple weight/style variants with lots of @font-face approved fonts. Even still, in my eyes @font-face remains the most cost effective and easy to manage choice for beautiful web typography.
There are a ton of resources that can help you with implementing the technical side of @font-face, so I won’t get into those details here. FontSpring has the latest snytax for bullet-proof @font-face implementation, which is vital to ensure that your fonts are seen correctly by your visitors. I’ve listed some not-so-technical considerations when implementing @font-face in your designs.
Even though @font-face is widely supported, there is still the chance that your web fonts will not load. We can prepare for this by declaring a solid font stack that will maintain the visual appeal of our design and not break any layouts. A great example of this issue is when using a font that is relatively small compared to many default font sizes. League Gothic, a popular typeface with designers, falls into this category. Since it is a condensed, small typeface, a default font such as Arial, Helvetica or Verdana will appear much, much larger than League Gothic would have rendered if it fails to load. This can especially be a problem when working with grid layouts and large headlines. Declaring a condensed font such as Impact (while not ideal), certainly will help to relieve this issue. Take the time to explore different fallbacks, it will make a difference.
This is an important consideration when handing over your design to your client using a CMS to update content. If you don’t have bold and italics versions of the font you are embeddeding, browsers will attempt to fake bold and italics styles (similar to “faux” character settings for Photoshop users). Even if you do have the different weight of your font available, we still need to be careful. Roger Johannson from 456bereastreet.com has an excellent article about this very issue that is very complete so I won’t repeat the concepts here. The key is to declare
font-style:normal; in your original @font-face declaration.
I’ve had such a great experience using Font Squirrel that its hard to recommend any other site for high-quality, free fonts that you can use for your sites. If they don’t have a font that you’re looking for, and you’d like to create @font-face compatible versions of a web font you own, you can use their @font-face generator. They’ll create the appropriate files and create a CSS file that you can copy and paste into your stylesheet.
Titillium Text is a modern sans-serif that will continue evolving as students attending the Accademia di Belle Arti di Urbino in Italy cooperatively work on the typeface. It works as an uppercase display font quite well. It also has a number of different weights available for free for other uses.
Aller is another large, modern sans-serif family great for headlines. It has a little more of a playful character to it, which is why I thought it was perfect for a summer camp design I recently completed. Aller Display is particularly good for bold headings.
Since this site is set in Droid Sans, you don’t have to look very far for an example of what it can do for body copy. Google had this font developed for use on its handheld devices, and its clarity, space, and readability make for a useful and flexible solution for lots of websites.
Bebas Neue (released 2010) is an updated version of Bebas (released 2005), a condensed sans-serif that is great for (you guessed it), headlines.
Bebas Neue is far better for website implementation over its predecessor if only for the reason that its size is a lot closer to standard default sizes. If the font fails to load, you’re layouts will be more in tact. You’ll see this typeface all over the place once you start looking, and for good reason.