Precompile and include fonts in Ruby on Rails

Question

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);
           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:

glyphicons-halflings-regular-3c36a8aade6ab06e8a1af9ab88110382.woff

And finally, here is the JavaScript console output

Failed to load resource: the server responded with a status of 404 (Not Found)
https://dry-temple-2989.herokuapp.com/assets/glyphicons-halflings-regular.woff

What am I doing wrong?

score 3 · Accepted Answer · answered May 28 '15 at 21:47

I'm using the following approach to add fonts to Rails:

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

bootstrap.min.css.scss.erb

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.

For completeness sake, I also deleted `Rails.application.config.assets.precompile += %w( .svg .eot .woff .ttf)` from `config/initializers/assets.rb` because I had added it. — jmcmahon443, May 29 '15 at 12:52
I was able to follow the "recommended way" here: https://gist.github.com/anotheruiguy/7379570 that allows me to skip the erb file and inline the font-face css in my application.scss. — qix, Mar 23 '16 at 01:37

score 2 · Answer 2 · answered May 28 '15 at 19:55

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

url(font-path(glyphicons-halflings-regular.woff))

You forgot to use font-path in the url definition. You can find more on Rails Guides part 2.3.2 http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

Precompile and include fonts in Ruby on Rails

2 Answers2