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

• Typekit.com
• Typotheque.com

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.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type=" text/javascript" >
 
	$(document).ready(function() {
	$("body").css('display', 'none');
	});
 
	$(window).bind("load", function() {
	$("body").css('display', 'block');
	});
</script>