Twitter Bootstrap Question posted in

Twitter bootstrap – 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?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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.

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

Back To Top
Search