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.
Category CSS/Web Standards, jQuery, Web
You can follow any responses to this entry through the RSS 2.0 feed.
No Responses to “@font-face and CSS3 Solution”