@font-face works in Chrome, but not IE or Firefox

问题:

This is quite confusing to me. I am using font-squirrel to download a web kit to show a custom font. here is the link to font: http://www.fontsquirrel.com/fontfacedemo/League-Gothic

If you look at the homepage right now: http://www.simonsayswebsites.com/

the main text in the middle says "Custom Built Websites Designed To Get You More customers". It looks great in chrome, exactly as it should, but if you look at it in either firefox or IE, the custom font face does not work.

Here's the CSS generating the font-face:

@font-face {
font-family: 'LeagueGothicRegular';
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
src: url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
     url('http://simonsayswebsites.com/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;

}

Anyone have any ideas? I looked at many cases on this all ready, but I don't see one that relates to my case as I thought I have included all the different necessary files for each browser and have them uploaded to their respected places.

回答1:

Poking around I found this interesting tidbit for Firefox:

Same-origin rule: By default, Firefox will only accept relative links. If you want to use absolute links or include fonts from different domains, you need to send these fonts with Access Control Headers.

Try changing those font URLs to relative and see if that helps:

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot');
    src: url('/wp-content/themes/twentytenchild/League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.woff') format('woff'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.ttf') format('truetype'),
         url('/wp-content/themes/twentytenchild/League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

edit: see Korpela's answer; the problem was the mismatch from the 'www' subdomain. You should probably keep the URLs relative, though.

回答2:

The reason for the problem is (was) the use of a font across domains. A URL that starts “http://simonsayswebsites.com” is treated as being in a different domain than “http://www.simonsayswebsites.com” even though the two domain names may refer to the same computer.

Switching to a relative URL helped because then the domain is the same. But despite rumors to the contrary, Firefox does not reject absolute URLs in @font-face. I have set up a trivial demo to show this.

Presumably, the rumors have originated from cases like this: if switching to a relative URL helps, it is natural to assume that the type of URL was the issue.

回答3:

I had your problem too and searched a lot about it but came up with nothing... so i started experimenting on my CSS for some minutes and finally realized that i had duplicated font family names, I had been declaring below code in both my theme and layout page:

<style type="text/css" media="screen, print">
    @font-face 
    {
        font-family: 'foo';
        src: url('~/Assets/fonts/foo.woff') format('woff'),
        url('~/Assets/fonts/foo.ttf') format('truetype'),
        url('~/Assets/fonts/foo.eot') format('eot');
    }
</style>

I just needed to remove one of them and my code worked fine in all three browsers!

one more point is that just removing the line containing "font-family: 'foo';" parts will do the trick!