News for May 2011

@font-face CSS3

While creating my site, I decided to implement my own font, one that is not a generic browser or system font. To achieve this, I decided to use the new CSS3 @font-face property. The simple syntax is as follows:

@font-face {
font-family: 'elanio';
src: url('elanio.eot?') format('tryetype'),

This is great syntax, but I was not done yet. While this will work, it is not ironclad cross browser compliant. Each browser will only recognize certain font types, so you much create backup syntax and fall backs. Take a look at the following:

@font-face {
  font-family: 'Elanio Bro';
  src: url('ElanioBro.eot?') format('eot'), url('ElanioBro.woff') format('woff'), url('ElanioBro.ttf') format('truetype');

Let’s take a look at what is going on here: src: url(‘ElanioBro.eot?’) this question mark ‘?’ at the end simply forces a no 404 page in IE. With out it, IE would request the source file as such: …elaniobro.eot’)%20format(‘… which would result in a 404.

This method is credited to the same guy behind font squirrel and via Paul Irish’s blog

Posted: May 31st, 2011
Categories: code, tutorial
Comments: No Comments.