@Font-Face Doesn't Work in Firefox (But Exact Same Code Works on Another Site)

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

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.

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

Why does this @font-face code not work in Firefox 3.6?

Got it!

It is because I have the fonts installed locally. So by using the smily hack, thought up by Paul Irish, I can fix it. Here is the correct code.

@font-face {
    font-family: 'DigitaldreamFatRegular';
    src:    url('../fonts/digitaldreamfat-webfont.eot');
    src:    local('☺'), // This addition fixes it.
            url('../fonts/digitaldreamfat-webfont.eot?#iefix') format('embedded-opentype'),
            url('../fonts/digitaldreamfat-webfont.woff') format('woff'),
            url('../fonts/digitaldreamfat-webfont.ttf') format('truetype'),
            url('../fonts/digitaldreamfat-webfont.svg#DigitaldreamFatRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Firefox font-face rendering looks very different to e.g. Chrome

This seems to be a font issue since all opportunities that work for others do not affect the problem. Switching to a other font is the only solution in this moment.

Using @import and @font-face in a bookmarklet (works in Chrome, but not in Firefox)

Since Firefox does not allow remote calling of @font-face files I solved this by embedding the font information in the CSS file using Base64 Encode. This is an option provided in the FontSquirrel @font-face generator and it allowed the bookmarklet to import the font. Here's the bookmarklet code that worked cross browser:

javascript:%20newSS%20=%20document.createElement('link');%20newSS.rel%20=%20'stylesheet';%20newSS.href%20=%20'http://dl.dropbox.com/u/2040562/beta0.1/bookmarklet.css';%20document.head.appendChild(newSS);%20void%200

or:

javascript:
newSS = document.createElement('link');
newSS.rel = 'stylesheet'; newSS.href = 'http://dl.dropbox.com/u/2040562/beta0.1/bookmarklet.css';
document.head.appendChild(newSS);
void 0

@font-face working when local but not when upload to hosting space

I have come across many font embedding issues, whether it's hosting the fonts and CSS file on a different server or IE being an absolute !@?#.

In IE, press 12 which will bring up your developer tools and check to see what error is shown (if any). If you're being shown any of the following errors:

CSS3111: @font-face encountered unknown error.
my-font.eot

CSS3117: @font-face failed cross-origin request. Resource access is restricted.
my-font.eot?

I'd suggest following a thread I opened a few months ago which might help: @font-face import not working in offline website/different host using online fonts via CSS in IE only. This was an issue for IE only so wouldn't be surprised if you're having the same issue. I had other issues when transferring the font to a different server.

For any future font embedding, I would strongly suggesting using the following CSS code and ensuring all file types involved are converted correctly:

@font-face {
    font-family:'My-Font';
    src:url('../includes/fonts/my-font.eot');
    src:url('../includes/fonts/my-font.eot?#iefix') format('embedded-opentype'),
            url('../includes/fonts/my-font.woff') format('woff'),
            url('../includes/fonts/my-font.ttf') format('truetype'),
            url('../includes/fonts/my-font.svg#my-font') format('svg');
    font-weight:normal;
    font-style:normal;
}

@font-face not working

Double period (..) means you go up one folder and then look for the folder behind the slash.
For example:

If your index.html is in the folder html/files and the fonts are in html/fonts, the .. is fine (because you have to go back one folder to go to /fonts). Is your index.html in html and your fonts in html/fonts, then you should use only one period.

Another problem could be that your browser might not support .eot font-files.

Without seeing more of your code (and maybe a link to a live version of your website), I can't really help you further.

Edit: Forget the .eot part, I missed the .ttf file in your css.

Try the following:

@font-face { 
font-family: Gotham;
src: url(../fonts/gothammedium.eot);
src: url(../fonts/Gotham-Medium.ttf); 
}

---

Related Topics