Grow your CSS skills. Land your dream job.

@font-face compatibility errors

  • # December 10, 2012 at 1:43 pm

    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.

    # December 10, 2012 at 1:49 pm

    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.

    # December 10, 2012 at 2:44 pm

    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.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".