“”
Adding fonts to asset pipeline

Adding fonts to asset pipeline header

  View more techs   

Adding fonts to asset pipeline

 

Darío Macchi

Gastón Arbeletche

December 6, 2020

 

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”

 

Guillermo Osores

Gastón Arbeletche

Gastón is the CEO and one of the original co-founders at VAIRIX. He is a Certified Scrum Master with 10+ years of software development services experience for the local and international markets, and also specializes in business and management.

Contact us

Ready to get started? Use the form below or give us a call to meet our team and discuss your project and business goals.
We can’t wait to meet you!


Follow Us
See our client reviews