Cross-domain Issues (Fixing Broken Web Fonts)

Written by Dave | February 22 2016

​Cross-domain issues

Cross-domain issues sometimes arise when webpages call upon file assets served from a separate domain to that on which the page resides. In CE3 cross-domain issues may arise when viewing your website in Firefox or IE10, and when your are accessing the site from a domain or subdomain other than that on which the site is hosted, for example when you have a subdomain redirected to your main domain, or a secondary domain redirected to your main domain. 

Most often, cross-domain issues will manifest in Font Awesome icons or other web fonts failing to render on the page when viewing the page in Firefox or IE10.

The Fix

The fix for cross-domain web font issues is pretty easy. At the root of your domain, you will need to edit the existing .htaccess file, or if no such file exists then create it using a text-editor. In the file, put the following code:

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

<IfModule mod_mime.c>

  # Web fonts
    AddType application/font-woff woff
    AddType application/ eot

    # Browsers usually ignore the font MIME types and sniff the content,
    # however, Chrome shows a warning if other MIME types are used for the
    # following fonts.
    AddType application/x-font-ttf ttc ttf
    AddType font/opentype otf

    # Make SVGZ fonts work on iPad:
    AddType        image/svg+xml svg svgz
    AddEncoding gzip svgz


# rewrite →

<IfModule mod_rewrite.c>
    RewriteCond %{HTTPS} !=on
    RewriteCond %{HTTP_HOST} ^www\.(.+)$ [NC]
    RewriteRule ^ http://%1%{REQUEST_URI} [R=301,L]

This allows your other domains to access assets originating from your main domain. The AddType lines set the correct MIME types for the font files; not essential, but nice to do while we're here. The final directive normalizes all incoming URLs to eliminate “www.” from the address.

For a more comprensive look at .htaccess files, see .htaccess reference.

Filed Under:
  • .htaccess
  • Web Sites