HTML - Fonts will only display correct in Chrome but not in IE or Firefox

Question

I have created a new page on my company website. It looks awesome but only in Google Chrome.

The fonts do not display correctly within Internet explorer nor Firefox.

Here is the link to the page. (the actual content is inside an iframe which is http://www.lynch.ie/test/map.html )

http://www.lynch.ie/test/test.html

Thanks,

Please help me, im on my knees with this one! Thank you in advance.

David L.

Answer 1

It seems that you're loading the font files from a different domain.

Firefox and possibly IE do not allow that unless you set a Access-Control-Allow-Origin header, sample (credits to Callum Silcock's blog article ):

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff

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