Your browser (Internet Explorer 7 or lower) is out of date. It has known security flaws and may not display all features of this and other websites. Learn how to update your browser.

X

Navigate / search

@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.

%MINIFYHTML1bd0fe17e9a3fae17566847c3731e15d8%%MINIFYHTML1bd0fe17e9a3fae17566847c3731e15d9%

Leave a comment

name

email (not published)

website