Font awesome not displaying properly on Firefox

Question

I am trying to use a font awesome icon in a widget that is installed on a customers website. The font awesome icons displays correctly in Safari and Chrome but doesnt in Firefo

Answer 1

@font-face{font-family:'FontAwesome-webfont';

trust me, this really works.

Answer 2

Turn your fonts into base64 and include through CSS. This way you push the fonts through the browser code and the font files are not downloaded in the usual fashion needing cross domain permissions. This is also a DISA STIG issue to disable downloadable fonts but probably not your issue here. The solution can be seen at this post and also copied here:

You just need to Base64 the font and include it in a CSS file. Make sure to remove your call to the downloadable WOFF file once you include the call to the new FontAwesomeB64.css

Use https://www.base64encode.org/ to encode the WOFF Font-Awesome font file.

Edit the the resulting file and add these lines. When you get to the src:url line, make sure to run that right into the base64 information you received (don't use the greater than and less than signs I show here.) At the end of that base64 information add the single quote, parentheses, a semi-colon, and curly brace to finish:

@font-face { 
font-weight: 400;
font-style: normal;
font-family: 'FontAwesome';
src:url(data:application/x-font-woff;base64,<insert base64 code here>);}

You now have a base64 CSS file of the Font-Awesome font that bypasses all font download denial settings in browsers.

I've found that this works with all fonts, a little heavier on the download but worth the guarantee of functionality.