Skip to content

Dear Internet Explorer user: Your browser is no longer supported

Please switch to a modern browser such as Microsoft Edge, Mozilla Firefox or Google Chrome to view this website's content.

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:

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: Hyperlink chain icon

Thanks a lot Adam.

You saved me.

Your .htaccess trick works like a charm.

Keep it up.

Reply

On 20 January 2014, Adam Dimech wrote: Hyperlink chain icon

No worries. Glad to be of help.

Reply

    On 24 July 2015, kratai wrote: Hyperlink chain icon

    Hi Adam.

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

    Thanks you.

    Reply

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.