Getting message "blocked content" with font
Hi
I'm using FF 24 and try to access a website I'm currently developing. The page is working very well in IE, Opera and Chrome, but in FF error console I get the following message (domain names removed):
"[22:13:23.565] downloadable font: download not allowed (font-family: "XY" style:normal weight:normal stretch:normal src index:0): content blocked source: http://domain.com/font/XY.ttf @ http://domain.com/css/style.css"
There is no shield-icon in the addess bar, the homepage doesn't use https, the font is working on my local test environment, if I enter the font url in the address bar a download dialog shows up.
Which reasons can cause a "content blocked" message? I'm pretty frustrated right now because the error message doesn't really give me a clue what could cause this problem.
Hints and help would be very apreciated, thank you in advance. Cheers
All Replies (16)
I think "download not allowed" occurs when the font is hosted on a different domain than the page, and the font host does not send a header which says the font can be used on other sites. This is a cross-origin resource sharing (CORS) issue, not a mixed content blocking issue.
Thanks for your reply, but unfortunately all files are on the same domain: html-file in the main folder, style.css in subfolder css and the font file in a subfolder called font. The structure shown in my first post is identical to the error FF throws, I've just replaced my domainname with the word "domain". Any further ideas?
To be more precisely:
-the html-file links the stylesheet with href="/css/style.css".
-the css file contains the instruction @font-face {
font-family: "XY"; font-style: normal; font-weight: normal; src: url("../font/XY.ttf") format("truetype");
}
Is the message in the Web Console (Ctrl+Shift+k) any more illuminating?
When you say it works in your local test environment, is that on a file:// URL, or localhost, or an internal server?
Is it possible to change the url() to an absolute path (i.e., not using ../ navigation)?
ctrl+shift+k brings up the console I was already talking about in my first post (I'm sorry if I've used the wrong name for the dialog)
out test environment is on a localhost, identical apache version, identical modules. Unfortunately I'm not able to find out if the configs are 100% the same since the online server is not completely under our controll. I think that I've already unsuccessfully tried putting font and css in the mainfolder but I'll doublecheck asap. By the way, on our testserver the whole project is placed in a subfolder and works perfectly well with FF.
Thanks again for your help. Cheers
EDIT: I've just tried putting the font into the root folder and changing the path in the css to /XY.ttf and got the same error. only the path to the font-file changed as expected.
Modified
Could you check the other console, now called the Browser Console, formerly called the Error Console. It opens with Ctrl+Shift+j.
One possible difference could be the content-type or content-disposition sent with the file. I'm not sure you'll be able to view this in Firefox's Web Console if it won't download the file, but typically you can view those headers by clicking the request URL.
An alternative is to use this extension to inspect the HTTP response headers:
- Live Http Headers: https://addons.mozilla.org/firefox/addon/live-http-headers/
@jscher the error in the second console is the same as in the first. unfortunately I can't see FF to even try to download the file (it doesn't show up in the network console, no 404, nothing). When I type in the font-link directly the download window displays "ttf file" as filetype.
if it helps: I've defined the following things in my .htaccess as proposed by html5 boilerplate:
<IfModule mod_headers.c>
<FilesMatch "\.(eot|otf|ttc|ttf|woff)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch>
</IfModule>
AddType application/font-woff woff AddType application/vnd.ms-fontobject eot AddType application/x-font-ttf ttc ttf AddType font/opentype otf AddType image/svg+xml svg svgz AddEncoding gzip svgz
since the configuration show above is working on our local server, could this really be the cause of our problems? is there any possibility to get details about why FF is not allowed to download? I mean, if FF would try to download the file I should at least see a request in the network console. right?
@cor-el the font-file unfortunately doesn't show up anywhere. neither in firefox network console, nor in firebug network console, nor in live http headers. the only debug information I have so far is the errormessage from my first post.
Thank you two for your help so far. Any further ideas?
Actually, according to this page, the content-type isn't a factor: https://developer.mozilla.org/en-US/d.../@font-face#Notes. Apologies for the false lead.
No problem. Unfortunately I couldn't solve my problem up to now. Do you have any further suggestions? The error message is a bit too vague for me to get a clue on to the error source. Are there any possibilities to get a more detailed error message?
Thank you in advance, cheers
You can try HTTP Logging:
The http log doesn't contain any further information as well. Is there any chance to solve this problem? Is it caused by a firefox bug? How can I find out why the download is marked as not allowed by ff?
Thank you in advance.
What are the server response headers that Firefox receives for this file as shown by Live Http Headers?
Are you using a proxy to connect?
I'm not using a proxy.
Response for which file? Like i said in a previous post, the font file doesn't show up in any network console.
Thank you again
Doesn't the Live Http Headers extension show any record of the font file?
Did you tick all the boxes in the Generator tab of Live Http Headers?
That should at least show a GET request in that tab.
It doesn't show any record of that file. All boxes are checked. On our local server everything works fine and as expected but as soon as we try to use our live server: download not allowed/content blocked. Any further ideas?