Oliver Nassar

Using Twitter Bootstrap Font Awesome in Firefox

February 24, 2013

I was using Dave Gandy's great Twitter Boostrap font library Font Awesome which provides a font stylesheet to make use 200+ icons on my project imnosy.com. All was going well and good in Chrome, but when I took a look in Firefox, this is what I saw:

In looks like the stylesheet wasn't implementing the font conversion from the character to the image. I stumbled on the Stack Overflow post "Firefox failing at fonts" which highlights that Firefox doesn't like hotlink/cross-domain requests for fonts. I was embedding the style sheet as follows:

<link href="http://fortawesome.github.com/Font-Awesome/assets/css/font-awesome.css" rel="stylesheet" />

The solution to this was to simply checkout the project, and embed the stylesheets inline as so:

<!-- Twitter Boostrap Picto Font -->
<!-- <link rel="stylesheet" href="/static/vendors/Font-Awesome/css/font-awesome.min.css" /> -->
<!--[if IE 7]>
<link rel="stylesheet" href="/static/vendors/Font-Awesome/css/font-awesome-ie7.min.css" />
<![endif]-->

Another one bites the dust :)