CODEWITHSUNDEEP
firefoxgoogle-chromeinternet-explorer-9operafont-face
Steve
Steve

Reputation: 1765

Font-Face not working in Firefox, Opera, IE

This site uses @font-face to display Myriad Pro in the top navigation bar. I think this is a breach of license. I will look for an alternative version soon. I might look at Cufon? I'd like to get the @font-face rule working first, then drop in a different font.

The site has CSS:

<!--[if IE]>
@font-face {
    font-family: 'MyriadPro-BoldCond';
        src: url('.../myriadpro-boldcond.eot');
}
<![endif]-->

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

However, the font only displays in Chrome, not in IE9, Opera, or Firefox.

Update: I've moved the IE conditional entry below the others, but the issue remains in IE:

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

<!--[if IE]>
@font-face {
    font-family: 'MyriadPro-BoldCond';
        src: url('...myriadpro-boldcond.eot');
}
<![endif]-->

Upvotes: 0

Views: 1844

Answers (1)

Boris Zbarsky
Boris Zbarsky

Reputation: 35054

From the Firefox error console, when loading your site:

[02:31:52.279] downloadable font: download failed (font-family: "MyriadPro-BoldCond" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://www.doig.com.au/wp-content/themes/brinkley/myriadpro-boldcond.woff @ http://brinkley.doig.com.au/wp-content/themes/brinkley/style.css?ver=3.4.2

Note that the site is at brinkley.doig.com.au but the font is being loaded from www.doig.com.au. And presumably the server doesn't serve the right CORS headers.

The only reason it works in Chrome is that Chrome doesn't correctly implement http://dev.w3.org/csswg/css3-fonts/#default-same-origin-restriction

Upvotes: 1

Related Questions