font-awesome-rails gem not loading pre compiled fonts

Question

I am using the font-awesome-rails gem within my app and all is working in development, however when deployed in production the fonts do not show. I have tried browsing /assets/fontawesome-webfont.eot on the production site and get a 404 not found error. Looking on the server I can see the fonts are pre-compiled with a different name - e.g. /assets/fontawesome-webfont-e732c0065276ad722bded99096afaa19.eot

I have the

*= require font-awesome

line in my application.css file and when looking at the compiled css file can see it included:

Font Awesome 4.2.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */@font-face{font-family:'FontAwesome';src:url("/assets/fontawesome-webfont.eot?v=4.2.0");src:url("/assets/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"),url("/assets/fontawesome-webfont.woff?v=4.2.0") format("woff"),url("/assets/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),url("/assets/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");

The problem seems to be the difference in filenames between the file in the assets folder and the css call

I don't know how to call these font files within the CSS as the file name changes every time they are pre-compiled.

BryanH BryanH · Accepted Answer · 2015-09-10T15:05:48

What is happening is Rails is giving your assets (in this case, the font file) a unique name by adding an MD5 hash to the filename. When you update an asset, this will ensure the users' browsers do not cache the old file.

As you've observed, the CSS file is not using the unique name. This is because Rails doesn't know to update that reference.

There are several approaches you can use; I'll cover two here.

Use an Asset Helper

In order to do this, you will need to rename your static CSS file to a ERB file (i.e., rename stylesheet.css to stylesheet.css.erb). Then in the font reference:

@font-face{
  font-family:'FontAwesome';
  src:url("/assets/fontawesome-webfont.eot?v=4.2.0");
  src:url("/assets/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"),
    url("/assets/fontawesome-webfont.woff?v=4.2.0") format("woff"),
    url("/assets/fontawesome-webfont.ttf?v=4.2.0") format("truetype"),
    url("/assets/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");

You will use the asset_path helper:

url(<%= asset_path 'fontawesome-webfont.woff' %>)
url(<%= asset_path 'fontawesome-webfont.ttf' %>)
url(<%= asset_path 'fontawesome-webfont.svg' %>)

During runtime, rails will handle the unique names and insert the correct value in the CSS.

Use a CDN

For some common assets, like some fonts, jQuery, etc, using a CDN might make sense. With your external reference, Rails will not rename the file and your users may gain the benefits of caching.

When I search "fontawesome cdn", I get a link to a CDN that hosts both the CSS and the font files.

font-awesome-rails gem not loading pre compiled fonts

1 Answers

Use an Asset Helper

Use a CDN