Rails Asset Pipeline + Bootstrap 3 Fonts

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.


One Comment on “Rails Asset Pipeline + Bootstrap 3 Fonts”

  1. Steve says:

    Good call on this. I’ve been trying to figure out the best way to handle this situation too. For some reason in order for the precompiler to pick up the font files I had to add this instead to my application.rb file:

    config.assets.paths << Rails.root.join('vendor', 'assets', 'fonts')
    config.assets.precompile << Proc.new { |path|
    if path =~ /\.(eot|svg|ttf|woff)\z/

    The %w(.svg .eot .woff .ttf) wasn't working for me.