How to deliver fonts from a custom catalog using Asset Pipeline

Question

I am trying to enable Fontawesome with Rails 4, however the assets do not fall into the asset pipeline. However, fonts are not manufactured, and I cannot understand why.

File structure organization

All my assets are stored in /assets/components so Fontawesome appears in: /assets/components/font-awesome (they are in a different directory because I use Bower).

CSS manifest file:

 # application.css.scss /* ... *= require bootstrap/dist/css/bootstrap *= require font-awesome/css/font-awesome *= require_self *= require_tree . */ 

Asset pipeline configured to precompile fonts

 # Version of your assets, change this if you want to expire all your assets config.assets.version = '1.0' config.assets.paths << Rails.root.join('vendor', 'assets', 'components') # Adding Webfonts to the Asset Pipeline config.assets.precompile << Proc.new { |path| if path =~ /\.(eot|svg|ttf|woff|otf)\z/ true end } 

I added preliminary commands so that all fonts are precompiled according to this question

Heroku 12 Factor gem included

 #gemfile group :production do gem "rails_12factor" end 

So what is the problem?

When I click on Heroku, it shows that the application is requesting files, but they are not loading:

And looking at the logs, it seems that this is a routing problem - I would expect the font to be served with /assets/fonts , but it seems to look in /fonts

  app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000 app[web.1]: Started GET "/fonts/fontawesome-webfont.ttf?v=4.0.1" for 86.161.231.181 at 2013-10-29 15:53:01 +0000 app[web.1]: app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/fontawesome-webfont.ttf"): 

Why assets are not serviced

I am a little confused by all of this. Why are these fonts not served?

Answer 1

This problem may be caused by the fact that Rails resources cannot precompile the url() function in the CSS file.

Since your font files are precompiled by assets, all URLs point to these files, they must be rewritten into an MD5-digested file name. Unfortunately, Rails cannot automatically precompile url() , at least I think so, because I checked some cases and got this output :) In the Rails manual, Rails provides these functions using ERB and Sass. see here .

I think there are two ways to solve your problem.

First install the directory in .bowerrc - public/components and use them manually without requiring them in your assets.

Secondly, I suggest using font-url() instead of url() in Font-Awesome, so your application.css.scss will look like this:

  /* ... *= require bootstrap/dist/css/bootstrap *= require font-awesome/css/font-awesome *= require_self *= require_tree . */ @font-face { font-family: 'FontAwesome'; src: font-url('font-awesome/fonts/fontawesome-webfont.eot?v=4.0.3'); src: font-url('font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), font-url('font-awesome/fonts/fontawesome-webfont.woff?v=4.0.3') format('woff'), font-url('font-awesome/fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), font-url('font-awesome/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg'); font-weight: normal; font-style: normal; } 

Override the font path with your actual font path and font using font-url() , this function is provided by sass-rails. After the precompilation you will see that your URL has been rewritten to /assets/font-awesome/fonts/fontawesome-webfont-50b448f878a6489819d7dbc0f7dbfba0.eot?v=4.0.3 or something like public/assets/application-xxxxxx.css .

You can find the same approach in various gems that include assets, like bootstrap-sass, which is a very popular gem. read this file: _glyphicons.scss . You will see:

 @font-face { font-family: 'Glyphicons Halflings'; src: font-url('#{$icon-font-path}#{$icon-font-name}.eot'); src: font-url('#{$icon-font-path}#{$icon-font-name}.eot?#iefix') format('embedded-opentype'), font-url('#{$icon-font-path}#{$icon-font-name}.woff') format('woff'), font-url('#{$icon-font-path}#{$icon-font-name}.ttf') format('truetype'), font-url('#{$icon-font-path}#{$icon-font-name}.svg#glyphicons_halflingsregular') format('svg'); } 

url() been replaced. So I think rewriting @font-face in application.css.scss is the easiest way :)

By the way, bootstrap and font-awesome both have @font-face . I don't know if a font is needed.

When accessing the page, the correct log is displayed. Therefore, you do not need to change any code in the repositories. Hope this helps.