CSS: font-face Import problem in Firefox [solved]

If your trying to import a non standard font you might get into trouble when debugging with Firefox:

​[15:13:35.383] downloadable font: download failed (font-family: “chunkfiveroman” style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: http://mysite.com/fonts/chunkfive-webfont.ttf​

Everything seems fine, but FF isn’t displaying fonts as it should.

@font-face {
	font-family: chunkfiveroman;
	src: url('http://mysite.com/fonts/chunkfive-webfont.eot');
	src: url('http://mysite.com/fonts/chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
	url('http://mysite.com/fonts/chunkfive-webfont.woff') format('woff'),
	url('http://mysite.com/fonts/chunkfive-webfont.ttf') format('truetype'),
	url('http://mysite.com/fonts/chunkfive-webfont.svg#chunkfiveroman') format('svg');
	font-weight: normal;
	font-style: normal;
}

Same Origin Restriction

Firefox also has strict requirements for where the font resides in relation to the website. It requires that all font assets be served from the exact same domain as the calling website.

If you are serving from Apache, you can add this to you .htaccess file to allow your site access to the fonts:

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

Header set Access-Control-Allow-Origin “*”
That will fix the issue. One thing to note is that you can specify exactly which domains should be allowed to access your font. In the above htaccess I have specified that everyone can access my font with “*” however you can limit it to:

A single URL:

Access-Control-Allow-Origin: http://www.yoursite.com

Or a comma-delimited list of URLs

Access-Control-Allow-Origin: http://www.yoursite.com, http://www.anothersite.com

+ info: Mozilla Developer Network: HTTP access control (CORS)

Leave a Reply

Your email address will not be published. Required fields are marked *