Big news everybody – @font-face is here and now we finally have support for embedded fonts on all “grade A” browsers and the latest version of Internet Explorer. The average Internet user probably doesn’t know how big this is or what it means, but trust me, it’s huge. Designers can finally stop using images or hacks to emulate fonts and corporations can now have a font on their website that matches their brand guidelines.
In the past, browsers could only display a limited number of “web-safe” fonts. The majority of websites that sported fancy fonts like Futura or Univers had to use images instead of the actual text and this can have an adverse effect on search engine optimization. The copy on your web pages is what search engines, like Google, use to find and index your content so that it can be served up to customers looking for your product or service on the web.
The main advantages of embedding fonts using @font-face are that it is a cross browser solution (meaning it’s supported by the major browsers), it allows you to use actual text versus an image (which will improve your search engine rankings), it’s scalable, and it gives web designers the freedom to work around “web-safe” fonts.
Of course, there are a few drawbacks to using @font-face. Not all font foundries are on board with freely sharing their fonts, so the pool of available fonts is mostly full of freebies (sites like WebINK do offer foundry fonts for a monthly fee). Also, while your fancy embedded fonts will look good on the user’s computer screen, you can’t print the fonts used with @font-face. Instead the font will default to whatever is installed on the user’s computer. Possibly the biggest drawback is each embedded font takes a second or two to render in the browser, so users will see the text in one font family and then it will switch to the preferred font family once the font is fully loaded.
Web designers and clients alike have reason to celebrate this new advancement in browser capabilities. But remember—don’t go too crazy with your new font freedom, it’s a general rule of thumb to never have more than three different fonts on a page. Remember, even though @font-face is continually gaining more and more support, some old browsers will never support it, so you should always have a fallback (degradation FTW!). For more information on free fonts to use, visit the following sites: http://code.google.com/webfonts or http://www.fontsquirrel.com.
/
Read full article