advanced code snippet search

Posted By

LeeRJohnson on 02/04/11


Tagged

font typography font-face


Versions (?)

Who likes this?

3 people have marked this snippet as a favorite

wizard04
0xC0FFEE
nbreslow


The New Bulletproof @Font-Face Syntax

 / Published in: CSS
 

URL: http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax

The hack that makes this work is the '#' following the EOT filename. Seriously. Internet Explorer <9 has a bug in the parser for the src attribute. If you include more than one font format in the src, IE fails to load it and reports a 404 error. The reason is that IE attempts to load as a file everything between the opening parenthesis all the way to the very last closing parenthesis. To deal with that wrong behavior, you merely declare the EOT first and append a single hash mark. The hash fools IE into thinking the rest of the string is a URL fragment and loads just the EOT file. The other browsers follow the spec and select the format they need based on the src cascade and the format hint.

Expand | Embed | Plain Text 
  1. @font-face {
  2. 	font-family: 'MyFontFamily';
  3. 	src: url('myfont-webfont.eot#') format('embedded-opentype'), 
  4. 	     url('myfont-webfont.woff') format('woff'), 
  5. 	     url('myfont-webfont.ttf')  format('truetype'),
  6. 	     url('myfont-webfont.svg#webfontFqDaNIX6') format('svg');
  7. 	}

Report this snippet  

You need to login to post a comment.