View more techs

Adding fonts to asset pipeline

Well, first of all you have to add a new folder in app/assets called "fonts" with all your custom fonts inside.
After that you have to tell Sprockets to compile that new fonts folder.
You should add this line into your config/application.rb file:

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

You don’t need to do that after Rails 4.1, that folder is already added by default. You should use it if you are using another folder such as “vendor/assets/fonts”.
Last thing you need to do is reference the fonts in your css.scss using the ‘font-path’ helper.
This is an example:

@font-face {
font-family: 'FontAwesome';
src: url(font-path('fontawesome-webfont.eot'));
src: url(font-path('fontawesome-webfont.eot?#iefix')) format('embedded-opentype'),
       url(font-path('fontawesome-webfont.woff')) format('woff'),
       url(font-path('fontawesome-webfont.ttf')) format('truetype'),
       url(font-path('fontawesome-webfont.svg#fontawesomeregular')) format('svg');
font-weight: normal;
font-style: normal;
}

The compiled css is going to be like this:

@font-face {
font-family:'FontAwesome';
src:url("/assets/fontawesome-webfont-3b53a5ecdb9473016ee097f74f4f16c0.eot ");
src:url("/assets/fontawesome-webfont-3b53a5ecdb9473016ee097f74f4f16c0.eot") format("embedded-opentype"),
    url("/assets/fontawesome-webfont-9a3b8f90662fe9149f07a059f1a4c782.woff") format("woff"),
    url("/assets/fontawesome-webfont-69b0f4550dbb8738458172d11513538d.ttf") format("truetype"),
    url("/assets/fontawesome-webfont-51b69bdec08f19b3142dcd085ba6238a.svg") format("svg");
font-weight:normal;
font-style:normal;
}

As you can see, each font reference has this format:

"/assets/fontawesome-webfont-3b53a5ecdb9473016ee097f74f4f16c0.eot"

More font tips?

For the font-family value, don’t use spaces:

Wrong: “Font Awesome”
Right: “FontAwesome”