User Tools

Site Tools


Cross-domain Issues (Fixing Broken Web Fonts)

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. For example, if I have my site hosted at, and then I also own and have it redirecting to the former address.

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 our .htaccess reference.

cross-domain_issues_broken_web_fonts.txt · Last modified: 2013/04/25 06:53 by admin