CODEWITHSUNDEEP
cssruby-on-railstwitter-bootstrapfonts
jmcmahon443
jmcmahon443

Reputation: 302

Precompile and include fonts in Ruby on Rails

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?

Upvotes: 1

Views: 1891

Answers (2)

Peter Tretiakov
Peter Tretiakov

Reputation: 3410

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.

Upvotes: 3

edariedl
edariedl

Reputation: 3352

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

Upvotes: 2

Related Questions