Tumblr Icomoon Font Icons Not Rendering Properly In Firefox

gistfile1.md

Problem

While working on The Giver Movie's Official Tumblr I ran across a problem. It seems that my icomoon font icons failed to render properly in Firefox. The issue is due to the fact that Firefox doesn't allow cross-domain fonts. The traditional solve is to add the following to your .htaccess: Header set Access-Control-Allow-Origin "*".

However, I have no control over the .htaccess due to the fact that my code will be hosted on Tumblr.com. So, I attempted to upload the font files through Tumblr's static upload page. This also failed because Firefox treats subdomains the same as cross-domains.

Solution

Below is my original snippet:

@font-face {
  font-family : 'icomoon';
  src url('http://crossdomainurl.com/fonticon.eot') format('embedded-opentype');
}

1. Convert font icon files to base64 instead of including cross-domain links. I converted my font files using the following converter: http://www.opinionatedgeek.com/dotnet/tools/base64encode/
2. Then I replaced the cross-domain url with the newly copied base64 code.
3. Rinse and Repeat for each font type (eot, woff, svg, etc..)

@font-face {
  font-family : 'icomoon';
  src url('data:application/octet-stream;base64,BASE64_CODE_GOES_HERE') format('embedded-opentype');
}