Tutorials

Find the latest tricks and techniques for using or customizing your site with our software

Cross Domain Font Issues

globe

A common issue encountered by many customers not just of J!WHMCS Integrator or Integrator 3 but also those customers that use a CDN to serve up their images and static assets is that of cross domain fonts not being rendered properly.  This is directed at our customers using J!WHMCS or Integrator 3, but it may be useful to others as well.

How do you know if you are experiencing this issue?

For most, it's fiarly straight forward.  If you view your Joomla or Wordpress site and you have a great looking font, or maybe some icons provided through the Font Awesome font library, but then you go to your WHMCS site and it looks like the fonts are standard Arial or Tahoma or the FontAwesome icons look like little boxes instead of their nice little icons, then you may have this issue.  Using WHMCS with SSL but retrieving content that isn't using an SSL connection can also cause this issue, so you should check your URL to see if you are using SSL that you have the green box or lock in the browser bar.

You can only encounter this issue if you are using WHMCS on a doman or subdomain that is different from your Joomla / Wordpress domain or subdomain.  For instance, if your Joomla is located at http://myawesomedomain.com but WHMCS is at http://www.myawesomedomain.com, those are considered two different subdomains.

What is the reason this is happening?

Simply put, browsers are designed not to allow content that can be executed to be referenced in an HTML document and subsequently loaded if that content is not coming from the same origin as the HTML document.  This may have been done to prevent sites from embedding processor or resource intensive applications in HTML that isn't controlled by the application owner, or it may have been done to secure against any potential threats outside resources may pose (though not sure how the thinking went on this exactly).  At any rate, it is built into the specifications and is correct for this to happen.  Webkit based browsers (aka Chrome) do not follow this particular specification (at least for fonts, perhaps for others as well).

Okay, so how do I get around this issue?

For Apache servers, you will need to use an .htaccess file on the server where your fonts are stored because you need to add some lines of code.  Edit your htaccess file located in your public_html folder.  Insert this code:

<FilesMatch ".(eot|ttf|otf|woff)">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>

For Nginx boxes, use this code:

if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
add_header Access-Control-Allow-Origin *;
}

That should permit your fonts to work across domains.  This same logic can be applied to use on CDNs also.

Thanks to: http://davidwalsh.name/cdn-fonts

Recent Posts

Blog Archived