Forums

cheesedude31

So I had it like this:

@font-face{
  font-family: font;
  src: url('font.ttf');
  src: url('font.eot');
}

And worked in chrome but not ie9.

@font-face{
  font-family: font;
  src: url('font.eot');
  src: url('font.ttf');
}

this was the other way round.

@font-face{
  font-family: font;
  src: url('font.eot'),
  url('font.ttf');
}

then listed like this and it only works in chrome

@font-face{
  font-family: font;
  src: url('font.eot'),
  src: url('font.ttf');
}

and finally like this where it worked in neither. I'm at a loss. Am grateful for any help.

chriscoyier

This is from CSS3please.com - my go-to for the latest greatest CSS3 (even though @font-face isn't really CSS3) syntax.

This looks weird to me though, as the last I remember it, it required a few more formats and weird stuff like a hash tag in the url() src.

@font-face {
  font-family: 'WebFont';
  src: url('myfont.woff') format('woff'),  /* Firefox 3.6+, IE9+, Chrome 6+, Safari 5.1+*/
       url('myfont.ttf') format('truetype');  /* Safari 3—5, Chrome4+, Firefox 3.5, Opera 10+ */
}

This was the hip way for a while: http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

Maybe something changed...

Another good resource is to download a @font-face pack from Font Squirrel and look at the syntax that you get in the CSS from them. That's always super up-to-date.

cheesedude31

After looking at font squirrel i found this nice and convenient method

@font-face {
    font-family: 'MyFont';
    src: url('font.eot');
    src: url('font.eot?#iefix') format('embedded-opentype'),
         url('font.woff') format('woff'),
         url('font.ttf') format('truetype'),
         url('font.svg#MyFont') format('svg');
    font-weight: normal;
    font-style: normal;
}

Found this website http://www.font2web.com/ which converts otf and ttf to all necessary formats, so fun times.

Thanks anyway.

treehouse : what would you like to learn today?

Forums

[Solved] @font-face compatibility errors