@font-face doesn't work in Firefox (but exact same code works on another site)

问题

I have two sites using the same exact code for @font-face. The font files are hosted on the respective sites and the paths are correct.

One works, one doesn't. (And of course it works on my personal site and not the clients!)

I'd really appreciate some fresh perspective on this!

Where it WORKS:

The site: http://example.com/

The CSS file: http://365.example.com/index.php?css=photos/style.v.1275845154

The relevant code:

@font-face {
    font-family: 'JournalRegular';
    src: url('./themes/fonts/journal.eot');
    src: local('Journal Regular'), local('Journal'), url('./themes/fonts/journal.ttf') format('truetype');
 }
body{
    background: url("http://labs.example.com/personal/library/images/BG.jpg");
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'JournalRegular', Georgia, 'Times New Roman', Times, sans-serif;
    color: #999;
 }

Where it DOESN'T WORK:

The site: http://www.example.org/

The CSS file: http://www.example.org/wp-content/themes/theme/style.css

The relevant code:

@font-face {
    font-family: 'JournalRegular';
    src: url('http://example.org/wp-content/themes/theme/fonts/journal.eot');
    src: local('Journal Regular'), local('Journal'), url('http://example.org/wp-content/themes/theme/fonts/journal.ttf') format('truetype');
 }
.title h1{
    float:left;
    background:url(images/blt-ttl1?.png) no-repeat 0 4px;
    margin:0px 0 5px;
    /* padding:8px 0 8px 34px; */
    color:#bd5f01;
    letter-spacing: .5pt
    font:24px/26px 'JournalRegular', Georgia, 'Times New Roman', Times, serif;
}

Any help would be so greatly appreciated!

回答1:

Font-embedding, that is, the @font-face requires the font file to be created on a per-domain basis.

That's because the some fonts might have copyright issues.

回答2:

the ultimate solution to this problem is:

    <FilesMatch "\.(ttf|otf|eot)$">
    <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    </IfModule>
    </FilesMatch>

Copy the code into the .htaccess file, upload it, and your're done: firefox will show your @font-face fonts.

Hope it works for everyone!

回答3:

firefox accepts only relative links for font-face by default.. link

Use HTTP access control or relative links

来源：https://stackoverflow.com/questions/3104546/font-face-doesnt-work-in-firefox-but-exact-same-code-works-on-another-site

标签

css

fonts

font-face

typography