Css @Font-Face Absolute Url from External Domain: Fonts Not Loading in Firefox

CSS @font-face absolute URL from external domain: fonts not loading in firefox

You can’t use @font-face in Firefox with a font hosted on a different domain
If you want to specify a font for @font-face using an absolute URL, or a font hosted on a different domain, it needs to be served with Access Control Headers, specifically the Access-Control-Allow-Origin header set to '*' or the domains allowed to request the font. This also applies to fonts hosted on a different sub-domain. If you are using Apache you can try to put this in your .htaccess and restart the server

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

CSS @font-face not working with Firefox, but working with Chrome and IE

LOCALLY RUNNING THE SITE (file:///)

Firefox comes with a very strict "file uri origin" (file:///) policy by default: to have it to behave just as other browsers, go to about:config, filter by fileuri and toggle the following preference:

security.fileuri.strict_origin_policy

Set it to false and you should be able to load local font resources across different path levels.

PUBLISHED SITE

As per my comment below, and you are experiencing this problem after deploying your site, you could try to add an additional header to see if your problem configures itself as a cross domain issue: it shouldn't, since you are specifying relative paths, but i would give it a try anyway: in your .htaccess file, specify you want to send an additional header for each .ttf/.otf/.eot file being requested:

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

Frankly, I wouldn't expect it to make any difference, but it's so simple it's worth trying: else try to use base64 encoding for your font typeface, ugly but it may works too.

A nice recap is available here

@font-face is not working on Chrome, Firefox, IE

Ryan is right. I replaced your URL with a working URL and it works absolutely fine.
This is what I used.

    @font-face {
    font-family: 'ma';
    src: url('http://www.cse.buffalo.edu/~rsd7/BaroqueScript.ttf');
}


.menu_head {
    width: 100%;
    position: relative;
    height: 30px;
    font-family: 'ma';
}

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

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.

---

Related Topics