@fontface works on http://www.domain.com but doesn

2020-04-21 16:54发布

问题:

@fontface works when I load http://www.grozav.com but doesn't work on http://grozav.com .

What can I do to fix this?

 @font-face {
    font-family: Impact;
    font-weight:bold;
    src: url('http://grozav.com/font/impact.ttf');
    src: url('http://www.grozav.com/font/impact.ttf');}

@font-face {
    font-family: MisterGiacco-Bold;
    font-weight:bold;
    src: url('http://grozav.com/font/giacco.ttf');
    src: url('http://www.grozav.com/font/giacco.ttf');}

I tried putting 2 urls. Didn't work. Can someone help me with this?

回答1:

Why specify the full URL? Just put:

src: url('/font/giacco.ttf');

It might be a case that @fontface doesn't work cross-domain. FireFox has an issue with this.

But if you are using a file from within the same domain, just don't specify the full domain, and just the supply the path to the ttf file.



回答2:

Definitively it's the url, but why? Apparently @font-face does not care about cross domain issues but firefox do, so in order to make it work with cross domain in firefox you should set your server (apache?) to avoid this restriction for one or multiple domains, the following page has some info about this: http://www.cssbakery.com/2010/07/fixing-firefox-font-face-cross-domain_25.html

I guess the simplest choice is @Curt's choice ;)