@font-face and CSS3 Solution

I feel like I have been waiting for support for @font-face for years now. How many times have you had to make an image because a client wanted a specific type-face or have you had to limit your sites to Arial, Georgia, Verdana, and Times New Roman. Suffer no longer!

It looks like support for @font-face has finally come around, includes the following browsers below:

  • IE4 +
  • Firefox
  • Safari
  • Opera
  • Google Chrome (coming soon!!)

Check out this great article from Paul Irish on how to get @font-face setup on your own site.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
         url('GraublauWeb.otf') format('opentype');

Of course, the font foundries are still going to have issues with us placing their fonts on the web without the proper licensing. But there are options for that too, such as:

Also, once you start using @font-face, you will soon notice that in some browsers you will see a flicker (FOUC, or Flash of Unstyled Content), from when the page loads to when the font face is loaded in. Need a fix, try this jQuery fix as provided by Typotheque.com.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: