@font-face Firefox Cross Domain Problem

The other day I encountered a problem when using custom web fonts for use on a project.

I had my project content on mydomain.co.uk, I also had my images on a seperate subdomain - images.mydomain.co.uk and finally I had my fonts on another subdomain fonts.mydomain.co.uk.

My Problem with Firefox

I then tried to use these web fonts I had uploaded. I found out that this worked in all browsers (Chrome, IE, Opera) apart from Firefox & Safari.

After some research I found out that the Firefox browser restricts cross domain lookups for these files.

The .htaccess Fix

By allowing these cross domain lookups it will allow Firefox to correctly render my selected text with my preferred custom font. So inside mydomain.co.uk's root folder I update my .htaccess file.

# .htaccess file - allow access
header add Access-Control-Allow-Origin "mydomain.co.uk"

comments powered by Disqus