In rails 5 @font-face custom css is not working after I put fonts in assets's font folder?

Question

I am using font-awesome custom css but it is not working in my rails application.

I am getting this error:

ActionController::RoutingError (No route matches [GET] "/fonts/fontawesome-webfont.woff2"):

added font In assets's stylesheet folder make style.css

@font-face { font-family: 'ProximaNovaA-Light'; src: 
url('ProximaNovaA-Light.otf') format('opentype'), 
url('ProximaNovaA-Light.woff') format('woff'), 
url('ProximaNovaA-Light.eot') format('embedded-opentype'),
url('ProximaNovaA-Light.ttf') format('truetype'), 
url('ProximaNovaA-Light.svg#ProximaNovaA-Light') format('svg'); 
font-weight: normal; font-style: normal; }

I think this is a path issue, how can we fix it?

Answer 1

Solution

change that file to .erb and

url('fontawesome-webfont.woff2') 

to

url(<%= asset_path 'fontawesome-webfont.woff2' %>)

or install the fontawesome gem

Explanation

url('ProximaNovaA-Light.otf') is not working.

This is my url in the browser developer tools sources tab. I display url

This the detail of my code, as you can see I commented url() tags and uset the asset_path erb helper

As you have a runtime error you can not check the url, but the message says that your url is /fonts/fontawesome-webfont.woff2.

As you see my url is /assets/ElegantIcons-912b4fcc232e1f45d329e2a127bca4bdf3195d965a2abce223b068e3c3c7db6a.eot, because the idea of the asset pipeline is pre-compiling assets with a digest.

The digest is the code 912b4fcc232e1f45d329e2a127bca4bdf3195d965a2abce223b068e3c3c7db6a that identifies the asset in my folder /public/assets, where a temporary copy of my stylesheets, javascripts, images are saved.

That is the location where files are saved and read (/public/assets). The url() helper is not converting the relative path /fonts/fontawesome-webfont.woff2 for the file app/asset/fonts/fontawesome-webfont.woff2 into public/assets/fontawesome-webfont-digestcode.woff2

Actually this is a big issue with Rails Asset Pipeline discussed in this post.

The other scenario is that you do not have that image.

This is the code I used in my custom fonts file elegant-icons-style.scss.erb to import those images.

@font-face {
    font-family: 'ElegantIcons';
    src: url(<%= asset_path 'ElegantIcons.eot' %>),
         url(<%= asset_path 'ElegantIcons.eot?#iefix' %>) format('embedded-opentype'),
         url(<%= asset_path 'ElegantIcons.woff' %>) format('woff'),
         url(<%= asset_path 'ElegantIcons.ttf' %>) format('truetype'),
         url(<%= asset_path 'ElegantIcons.svg' %>) format('svg');
    /*src: url('/assets/ElegantIcons.eot');
    src: url('/assets/ElegantIcons.eot?#iefix') format('embedded-opentype'),
         url('/assets/ElegantIcons.woff') format('woff'),
         url('/assets/ElegantIcons.ttf') format('truetype'),
         url('/assets/ElegantIcons.svg#ElegantIcons') format('svg');*/
    font-weight: normal;
    font-style: normal;
}

Answer 2

Try this

font-family: '/assets/ProximaNovaA-Light';
src: url('/assets/ProximaNovaA-Light.otf') format('opentype') 

Answer 3

change that mycssfile.css file to mycssfile.css.erb

(add .erb end of file, then you can use rails code in .css.erb file)

and in mycssfile.css.erb file, change:

url('fontawesome-webfont.woff2') 

to

url(<%= asset_path 'fontawesome-webfont.woff2' %>)

Final code in .css.erb file:

@font-face { font-family: 'ProximaNovaA-Light'; src: 
url(<%= asset_path 'ProximaNovaA-Light.otf' %>) format('opentype'), 
url(<%= asset_path 'ProximaNovaA-Light.woff' %>) format('woff'), 
url(<%= asset_path 'ProximaNovaA-Light.eot' %>) format('embedded-opentype'),
url(<%= asset_path 'ProximaNovaA-Light.ttf' %>) format('truetype'), 
url(<%= asset_path 'ProximaNovaA-Light.svg' %>#ProximaNovaA-Light) format('svg'); 
font-weight: normal; font-style: normal; }