skip to Main Content

After following some of the instructions here, I am trying to precompile Twitter Bootstrap Glyphicon fonts. They are pretty much just like any other custom font.

Here is my css in bootstrap.min.css.scss

@font-face{font-family:'Glyphicons Halflings';
           src:url(glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),
               url(glyphicons-halflings-regular.woff2) format('woff2'),
               url(glyphicons-halflings-regular.woff) format('woff'),
               url(glyphicons-halflings-regular.ttf) format('truetype'),
               url(glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg')

Here is my code in config/initializers/assets.rb

Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf)

My fonts are showing up in public/assets after running rake assets:precompile. They look like this:


And finally, here is the JavaScript console output

Failed to load resource: the server responded with a status of 404 (Not Found)

What am I doing wrong?



  1. Acording to rails guides. You should use fonts in your css files in the following way:


    You forgot to use font-path in the url definition. You can find more on Rails Guides part 2.3.2

    Login or Signup to reply.
  2. I’m using the following approach to add fonts to Rails:

    1). Add .erb extension to your css file.


    2). Refactor url to fonts in this file.

    @font-face{font-family:'Glyphicons Halflings';
               src:url('<%= asset_path('glyphicons-halflings-regular.eot') %>');
               src:url('<%= asset_path('glyphicons-halflings-regular.eot') + '?#iefix' %>') format('embedded-opentype'),
                   url('<%= asset_path('glyphicons-halflings-regular.woff2') %>') format('woff2'),
                   url('<%= asset_path('glyphicons-halflings-regular.woff') %>') format('woff'),
                   url('<%= asset_path('glyphicons-halflings-regular.ttf') %>') format('truetype'),
                   url('<%= asset_path('glyphicons-halflings-regular.svg') + '#glyphicons_halflingsregular' %>') format('svg')

    3). Add *= require bootstrap.min.css.scss.erb to application.css file.

    4). Create fonts folder in app/assets folder and move font files there.

    5). Add these lines to config/application.rb

    config.assets.enabled = true
    config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

    6). Add these lines to config/environments/production.rb

    config.assets.compile = true
    config.assets.precompile += %w( .svg .eot .woff .woff2 .ttf )

    Works well on Heroku and VPS/VDS.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top