Bulletproof @font-face syntax by Paul Irish

I’ll be covering a few ways to add fonts to your website in my classes over the next few days but here is one method from Paul Irish that works well. Keep in mind you will also need to use Font Squirrel to generate fonts with @font-face. Here is his example CSS:

@font-face {
font-family: ‘Graublau Web’;
src: url(‘GraublauWeb.eot’);
src: local(‘☺’),
url(‘GraublauWeb.woff’) format(‘woff’), url(‘GraublauWeb.ttf’) format(‘truetype’);

On another note Paul has been developing a few other nifty things. I enjoyed his CSS3 please site and am looking into the HTML5 boilerplate. The CSS3 site has some nice tips and tricks for things like rotation that are new to CSS.

css3 please

html5 boilerplate


  1. Earle Zaki Feb 03, 2011 - 03:03 AM

    I dont know what to say. This is definitely one of the better blogs Ive read. Youre so insightful, have so much real stuff to bring to the table. I hope that more people read this and get what I got from it: chills. Great job and great blog. I cant wait to read more, keep em comin!