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.




0 thoughts on “@font-face and CSS3 Solution”

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts

Web

Angular JS Magazine on Flipboard

I have been working with AngularJS for about a year now, trying to learn as much as I can about this growing framework. It’s been a wild ride and I’m going to post a summary Read more…

Top 5

Top 5 Articles : Week of November 25

During the the week of November 25th, I really started to dive into Angular JS. My top 5 articles of the week are mainly about AngularJS, an MVC framework by Google. #1 : AngularJS WebInspector Read more…

eCommerce

How to implement Bronto Email JavaScript Conversion tracking in Google Tag Manager

This tutorial will show you how to setup Bronto Advanced JavaScript Conversion tracking using Google Tag Manager. Bronto Advanced JavaScript tracking gives you more visibility to all of the products that customers are purchasing, then Read more…