How to Fix Font Awesome Breaking with MaxCDN

Font Awesome Breaking with MaxCDN

I am a huge fan of Font Awesome… have been for years. I even contributed to Dave Gandy’s new project, Black Tie, over on Kickstarter. Anyways, usually when you install and configure MaxCDN your Font Awesome icons will suddenly disappear and or break. It might look something like this below.

font awesome broken with CDN

The Reason?

The reason is because when using Webfonts via @font-face or other CSS3 methods, some browsers like Firefox and IE will refuse to embed the font when it’s coming from a 3rd party URL because it’s a security risk. (source: MaxCDN)

Follow the steps below to prevent Font Awesome from breaking while using MaxCDN. Or better yet, switch to KeyCDN. I am no longer using MaxCDN and have switched to KeyCDN. It has more POPs and half the price! Also, you won’t run into any font awesome issues.

Step 1 – Option a

There are two ways to add the required headers to fix the Font Awesome issue. I prefer this first option where we are adding them via the MaxCDN EdgeRules (note: only available in enterprise accounts). This way you don’t have to mess with your .htaccess file locally. Also depending upon your WordPress plugins your .htaccess file might get overwritten once in a while so better to have this at the CDN level in my opinion.

To add an EdgeRule, click into your MaxCDN pull zone and click into into “EdgeRules.”

maxcdn edgerules

We will then click on Create Rule tab and click on “New Rule.”

maxcdn new rule

Select “Default” for the match type, under Directive select “Add Header” and input the following: 

Access-Control-Allow-Origin "*"

Leave the rest as defaults and click on “Save.”

maxcdn header rule

After adding this you will need to clear the cache on your website and it might take a few minutes.

Step 1 – Option b

The second option to adding the header is to add it to your .htaccess file located in the root of your WordPress install folder. I am going to assume you are on an Apache server.  Add the following code to the very top of your .htaccess file.

If you are running on something else please see these alternatives: http://support.maxcdn.com/how-to-use-cdn-with-webfonts/

# ----------------------------------------------------------------------
# CORS-enabled images (@crossorigin)
# ----------------------------------------------------------------------
# Send CORS headers if browsers request them; enabled by default for images.
# developer.mozilla.org/en/CORS_Enabled_Image
# blog.chromium.org/2011/07/using-cross-domain-images-in-webgl-and.html
# hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/
# wiki.mozilla.org/Security/Reviews/crossoriginAttribute
<IfModule mod_setenvif.c>
  <IfModule mod_headers.c>
    # mod_headers, y u no match by Content-Type?!
    <FilesMatch ".(gif|png|jpe?g|svg|svgz|ico|webp)$">
      SetEnvIf Origin ":" IS_CORS
      Header set Access-Control-Allow-Origin "*" env=IS_CORS
    </FilesMatch>
  </IfModule>
</IfModule>
# ----------------------------------------------------------------------
# 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|css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Step 2

If you already have your CDN enabled in WordPress you might need to purge your cache over at MaxCDN to see if it works. If so, click into your pull zones, click the little arrow next to “Manage” and select “Purge All Cache.”

maxcdn purge all cache

Optional Step 3 – Font Awesome Still Broken?

Well that is why I wrote this article! Because I tried everything MaxCDN said to try and nothing worked. Here are some more things to try if nothing above helped.

You might not have headers installed on your server. To install them run the following:

sudo a2enmod headers

You will then need to restart apache.

sudo service apache2

Finally take a look at your vhosts… it might have an access deny set outside of the main config. And after doing all of this you will need to of course purge the cache on your CDN again.

Hopefully after trying everything above Font Awesome is now working again.

Font Awesome from KeyCDN

KeyCDN now sponsors a free font awesome CDN which you can use to speed up your font awesome icons with one line of code!

Again, I recommend using KeyCDN over MaxCDN. More POPs and half the price!

As always feel free to leave your comments below!

Get More Stuff Like This

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

8 thoughts on “How to Fix Font Awesome Breaking with MaxCDN”

  1. Pingback: This Week In WordPress: Sep 29, 2014 - Max Foundry
  2. Pingback: This Week In WordPress: Sep 29, 2014
    • Hi John! Thanks for your comment. Unfornately for a couple of my sites purging the cache didn’t help at all. It required both the .htaccess edit + vhost permission change.

  3. Bonjour
    Article qui peut certainement rendre service mais tu as oublié de préciser qu’il faut un compte maxcdn entreprise pour avoir accès à ta première option. Etant sur un serveur nginx je n’est pas de fichier htaccess… A bientôt !

    • Hello! I had to translate your message lol… but I am on a starter plan (1 TB) with MaxCDN and have access to the Edge Rules. Maybe you can ask them for it?

  4. Thank you very much for this valuable information. We switched to KeyCDN and it worked like a charm. Indeed, with MaxCDN, you need to have an Enterprise account to get access to EdgeRules in order to solve the problem.

    • Thanks for the comment! It is very strange that you still have to either have an enterprise account to gain access to the EdgeRules or touch your server config. With KeyCDN the Access-Control-Allow-Origin “*” is included in header response so everything works perfectly right out of the box. Also KeyCDN just launched Let’s Encrypt integration, so now we get free SSL certs too!

  5. Thanks a lot for topic but in fact in MaxCDN you could have enabled headers and it would have solved the problem from the beginning :
    If you open your Pull Zone, then Manage – Settings, in the Edge Settings block make “Add CORS Headers” enabled ==> It will solve the problem.

    • Thanks Bono. They didn’t have that option when this was originally written a couple years ago. Unfortunately MaxCDN always behind the times. I recommend KeyCDN. Thanks for the heads up though, I will make a note for people above in the article.

Leave a Comment

shares