@font-face: Firefox requires user to allow downloa

Running a site on the CargoCollective platform.

Specifying @font-face as follows:

@font-face {    font-family: 'Meta';
                src:    url('https://www.sugarsync.com/pf/D7160824_3237110_68577?directDownload=true') format('embedded-opentype'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68571?directDownload=true') format('truetype'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68573?directDownload=true') format('woff'),
                        url('https://www.sugarsync.com/pf/D7160824_3237110_68579?directDownload=true#Meta') format('svg');
                font-weight: normal;
                text-shadow: 0 1px 0 rgba(255,255,255,0.01);
                }

Works in Chrome and Safari, but not in Firefox. Should work in IE since it's got EOT at the top and the URL contains a '?' making IE think the alternates are a query string, though I have no way of testing this as I am on mac.

Problem is that in Firefox (10.0.2, Mac), the font being requested seems to need authorisation to download the font, so it never does download it, and I'm presented with the default serif, which alters the appearance dramatically.

Styling is declared also in the CSS, as usual, with correct hierarchy structure, for example:

body { 
       font-family: Meta, Helvetica, Arial, sans-serif; 
      }

Not sure why this isn't working, frankly. I've heard it said that Firefox usually downloads the last font in the list, which I have as the SVG as a reading-order 'last resort' filetype, and the font name specified using #Fontname at the end of the URL. Could this be the problem? Can I elect not to specify the SVG Font Name, if this is the case?

I also have this not working in Firefox on another of my websites also hosted on Cargo.

Situation there differs a little, and seems to rule out the obvious issues with this one:

There, the code uses the old 'bulletproof' method:

@font-face {    font-family: 'Egyptienne';
                src url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.eot') format('embedded-opentype');
                src: local('☺'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.ttf') format('truetype'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.woff') format('woff'),
                url('http://dl.dropbox.com/u/34000443/My%20Site%20Fonts/Egyptienne/Web/Egyptienne/egyptiennef-roman-webfont.svg') format('svg');
                font-weight: normal;
                text-shadow: 0 1px 0 rgba(255,255,255,0.01);
                }

But again, the font never loads, and I'm left with ol' Mr. Default.

Differences that I thought may be the issue in the other situation but which seem to be ruled out by this one:

HTTP vs HTTPS (I initially thought it was an issue with being behind the S of HTTPS)
SVG Name is never specified, and there's not even a query string to confuse it

[Also, probably irrelevant but before someone asks, the text-shadow property is to minutely improve text rendering in windows.]

Finally, I assume the problem is with Access Control Headers, but how does one append these to font-face code, since there is no .htaccess available to edit?

Thanks in advance!

回答1:

Firefox does not allow you to load font resources from a different domain. You would have to explicitly allow this via an .htaccess file on the dropbox.com server.

Here's a snippet:

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

Or even better, since the above code will allow anyone to leach:

<FilesMatch "\.(eot|otf|woff|ttf)$">
  SetEnvIf Origin »
    "^http(s)?://(.+\.)?(domain1\.org|domain\.com)$" origin_is=$0
  Header set Access-Control-Allow-Origin %{origin_is}e env=origin_is
</FilesMatch>

More information can be found here: http://www.fontsquirrel.com/blog/2010/11/troubleshooting-font-face-problems

回答2:

we had the same problem. This was bad permission configuration of the application. More specific with de /fonts/ folder. The application was restricting the access to the resources of the /fonts/ folder. So force the browser to download the fonts... sorry about my english.