Cross-domain support for embeded @font-face fonts in Firefox and Internet Explorer

A simple approach to getting cross-domain support for embedded @font-face fonts in Firefox and Internet Explorer.

Using the @font-face property in CSS3, it is possible to embed fonts into websites so that they will display on any browser and on any computer, regardless of whether the font is locally installed or not.

Or so the theory goes.

Implementation of @font-face is fairly straightforward until cross-domain support is required. Then it becomes tricky.

For instance, I wanted my font files served from a.mydomain.com whilst my cascading style sheet was hosted on b.mydomain.com and my HTML file is hosted on c.mydomain.com. To achieve this, I used absolute URLs in my CSS:

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

By default, this will work in Opera, Safari and Chrome but embedded fonts will fail in Firefox and Internet Explorer because the latter two browsers won’t support cross-domain requests for font files. This is especially problematic when using a CDN.

To get around this, the following code should be inserted into a .htaccess file located on the root of the server where the fonts are hosted (in our example: a.mydomain.com):

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

For me, this corrected the problem in Firefox but I was unable to get the fonts to display in IE10. Using the F12 Developer Tools utility, I received the following error:

CSS3117: @font-face failed cross-origin request. Resource access is restricted.

To remedy this, I logged-on to cPanel and made sure that the MIME types for all of the font files were up-to-date, using Mike Kormendy’s approach:

svg as “image/svg+xml”
ttf as “application/x-font-ttf” or “application/x-font-truetype”
otf as “application/x-font-opentype”
woff as “application/font-woff”
eof as “application/vnd.ms-fontobject”

The final step was to go back to the .htaccess file and insert the following IE-specific code written by Nick Hood:

BrowserMatch MSIE best-standards-support
Header set X-UA-Compatible IE=edge env=best-standards-support

This resolved the problem in IE10.

Using the F12 Developer Tools with browser and document modes set for IE9 and IE8 as well as the NetRenderer, I could see that this approach also worked for IE9 and IE8.

Comments

3 responses to “Cross-domain support for embeded @font-face fonts in Firefox and Internet Explorer”

On 17 December 2013, Dharmesh Makwana wrote:

Thanks a lot Adam.

You saved me.

Your .htaccess trick works like a charm.

Keep it up.

On 20 January 2014, Adam Dimech wrote:

No worries. Glad to be of help.

On 24 July 2015, kratai wrote:

Hi Adam.

help me please.
I can’t solve it. TT^TT
I want to know how to fix it.

Thanks you.

Cross-domain support for embeded @font-face fonts in Firefox and Internet Explorer

Comments

Have Your Say