Rails Asset Pipeline + Bootstrap 3 Fonts

Posted by jkahn on February 06, 2014 · 1 min read

I admit it, I find the Rails Asset Pipeline confusing at times (as do seemingly many others judging from Stackoverflow and elsewhere).  Successfully adding the Bootstrap 3 glyphicon fonts took some trial-and-error amongst the various solutions I found as many still resulted in not found errors.

While there may be a better way, I found this approach most effective:

    1. Copy the contents of the Bootstrap "dist/fonts" directory to the "vendor/assets/fonts" directory (you will need to create a "fonts" directory.  Bootstrap's minified JavaScript and CSS files can be copied to the appropriate directly in "vendor/assets" as well.
    2. Add the following to "config/application.rb" within the application config block:
      config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
      config.assets.precompile += %w(.svg .eot .woff .ttf)
    3. Utilizing SASS (or LESS) here is useful in order to leverage built-in asset pipeline helper methods.  In a common file used across your site, include the following:
      @font-face {
        font-family: 'Glyphicons Halflings';
        src: font-url('glyphicons-halflings-regular.eot');
        src: font-url('glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
        font-url('glyphicons-halflings-regular.woff') format('woff'),
        font-url('glyphicons-halflings-regular.ttf') format('truetype'),
        font-url('glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
      }

Thus far, Not Found errors seem to have been eliminated.  If there is a better way, please comment.