I have a site which is using web font in css. It looks good in Chrome, IE, etc., except Firefox. It just shew a square with the number, something like F052.

I did a lot of search and it took me about 4 hours, until now I got the solution.
It is only happened on cross domain resource.
It is only happened on Firefox.
It is only happened when using CDN.

When I use Firebug to look at the pipe, the woff web font file is aborted. The url is corrected.

Catalin Rosu gave the solution in this post.

Firefox doesn’t allow cross-domain fonts

I grab the solution here for reference.

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

Add the snippet above to a .htaccess file within the same folder as the font file.

I find this snippet hours ago, but I put it in the .htaccess in the web site root folder, not in the font folder.
Mozilla has a post explain the situation, here

David Yin

David is a blogger, geek, and web developer — founder of FreeInOutBoard.com. If you like his post, you can say thank you here

Leave a Reply

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