Webfont not loading on firefox

2
votes

I have an issue loading a font on Firefox. I keep receiving an error message even though I tried using a webfont. I am using it on Tumblr and uploaded the fonts via the theme assets. Here is the Error I get:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://static.tumblr.com/**/****/neona-webfont.woff. This can be fixed by moving the resource to the same domain or enabling CORS. neona-webfont.woff downloadable font: download failed (font-family: "neonaregular" style:normal weight:normal stretch:normal src index:1): bad URI or cross-site access not allowed source: http://static.tumblr.com/**/****/neona-webfont.woff

Would anyone know a way to fix this issue?

In advance, Thank you.

2
cssfirefoxcross-domainfont-facetumblr
I would look at base64 the fonts, to get around CORS: marcos.ciarrocchi.me/post/31528113859/… – mikedidthis
Thank you ! this helped me fixing the issue :) – user3701088
Excellent. Maybe post your solution, rep + helps others out. :D – mikedidthis

2 Answers

7
votes

I assume you don't have access to static.tumblr.com , if so there isn't a solution to your problem (that I know of).

Reason:

Firefox blocks cross-domain fonts by default, unless the server sends a specific header. This header can be send by adding this to the .htaccess file:

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

But without access to the font server, this isn't possible to do.

1
votes

BTW, this will also fail soon with Chrome 37, because Chromes behaviour is fixed and will follow the spec and Firefox, IE 10, IE 11.

http://crbug.com/286681 https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/sU138vJ_PI0