Font Awesome does not display when using CDN

Font Awesome is wonderfull except when it does not display. Which can happen when using a CDN. It is possible for your apache configuration to block it. Here is how to fix it.

Steven Johnson
by | Posted: February 27, 2013 | Updated: April 8, 2014
Blog Post Image 734px Wide

We had a situation where some elements of a site were not displaying when the CDN was enabled. We were unsure why this happened. After troubleshooting and research we found it was a CORS issue and learned how to fix it.

The Problem

When we enabled our CDN and viewed the site in FireFox the drop down menu icons were missing but not in Chrome. It was clear an icon or element was not present. After some research we tracked down the missing icon. It was from Font Awesome. For some reason Font Awesome was not displaying when the CDN was enabled. Check out these images:

Font Awesome Missing:

Font Awesome Missing

Font Awesome Displaying:

Font Awesome Present

Why was this Happening?

After some research and a helpful email from Justin Dorfman @jdorman of NetDNA, I learned about Cross Origin Resource Sharing (CORS) issues.

For those who have no idea what a CORS issue is, and that included me, here are the details. It is a security / safety feature that keeps browsers from accessing resources on different servers, which keeps bad people from doing bad things.  Here is the CORS Wikipedia Page.

Here it is in English. When you turn on the CDN, the web server tells the browser to get some resources from the CDN and the CDN says get some files from Font Awesome server. The server also tells the browser it can not download fonts from another location. And that is a problem and your page does not correctly display. Well FireFox and IE pay attention to these rules Chrome does not.

If you have any easier way to explain this email me and I will upate the page

 

The Solution

I found this NetDNA .htaccess example post. This a great example of what to add to your .htaccess file to improve performance.

# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".

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

By adding the above code the server is telling the browser it is okay to access font files from other servers.

The issue is now solved.

Resources used to help solve the issue

 

Other Helpful CDN Resources 

Steven Johnson

Steven is a Joomla web developer and worked with Joomla since the Mambo days. He has built websites for startup businesses all the way to for Fortune 500 companies. A graduate of Georgia Tech in Chemical Engineering, he now happily spends his time building websites and reviewing all types of technology.

×

Get Hosting Coupons & the Best Joomla Guides and Resources

Sign Up for our newsletter and get access to Exclusive Hosting Deals, as well as montly Joomla tips, tricks & resources.