@font-face and CSS3 Solution

0
@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.
[css]
@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘Graublau Web Regular’), local(‘Graublau Web’),
url(‘GraublauWeb.otf’) format(‘opentype’);
}
[/css]

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