Skip to content

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

G13th October 2013

C3 Comments

TApache, browser, CSS

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”

  • Written by Dharmesh Makwana on 17 December 2013:

    Thanks a lot Adam.

    You saved me.

    Your .htaccess trick works like a charm.

    Keep it up.

  • Written by Adam Dimech on 20 January 2014:

    No worries. Glad to be of help.

    • Written by kratai on 24 July 2015:

      Hi Adam.

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

      Thanks you.

Have your say:

The following HTML is permitted:
<a href="" title=""> <b> <blockquote cite=""> <code> <em> <i> <q cite=""> <strike> <strong>

Comments will be published subject to the Editorial Policy.