@font-face compatibility errors

[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.

[Chris Coyier]

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](http://www.fontsquirrel.com/) 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.

[Author]

Posts