I visited the site yesterday and all of the social media icons had turned into hollow squares. I thought that was a little odd, given that it had been working before that so I checked to make sure the fonts were being served. The logs showed that the requests were most assurredly being getting served, so I was left with a new mystery. I really dislike surprises when I have made no changes to something. More investigation required.

A short search made me think there may have been a change in the css and how it gets accessed, but that was incorrect as well. Nothing had been altered on the server, so it was back to searching and I discovered that I had fallen victim to a newer security item I was unaware of: same-origin policy restrictions.

After searching for a bit, I saw that I needed to add a Access-Control-Allow-Origin header.

The entry you need to add, which I just dropped into the .htaccess file, is:

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

I added it and still had an issue. It seems that under my current apache setup, I don’t have the mod_headers enabled, so time to run another command. a2enmod headers is the appropriate incantation, followed by a restart. That has apparently fixed it. I guess the old wordpress site had a bunch of this set for me, silently taking care of my site.

The full description I found is located at: meyermed.com for those who might want to read the full version.

The error message that shows up when using the developer tools was pretty much identical to the one I had on my site, of course the site name was different.

The article also had two links for further information:

Additional Resources:
http://enable-cors.org/server_apache.html
https://github.com/bokmann/font-awesome-rails/wiki/CORS-Cross-Domain-Support