custom font not loading on heroku with rails pipeline

Question

Following this SO post , I changed all of my @font-face definitions to look like the following:

  @font-face {
   font-family: 'Pe-icon-7-stroke';
   src:font-url('/assets/Pe-icon-7-stroke.eot?d7yf1v');
   src:font-url('/assets/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
   font-url('/assets/Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
   font-url('/assets/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
   font-url('/assets/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
   font-weight: normal;
   font-style: normal;
  }

Where all of the font files are plassed in /assets/fonts/ .

I also changed the file in which the above @font-face is declared from type .css to .scss . The fonts are still loading in development, but when I added the changes to git and pushed to my production site on heroku, the fonts still are not loading.

This may not be indicative of the problem I am having, but when I view my compiled assets on the live site, I see that for the definition of the font, there is written:

 font-family:'Pe-icon-7-stroke';
 src:url(/assets/Pe-icon-7-stroke.eot?d7yf1v);

as opposed to font-url it uses url (which is maybe how sass is converted into css, but may also mean that the old application.css is loading?)

https://kaf.herokuapp.com/assets/application-490d8d687dc0c9b526bf1348ca9a3a6f.css

For Reference, here is my complete assets directory on Github

https://github.com/ebbnormal/kaf/tree/master/app/assets/

Answer 1

Check out SASS asset helpers , specifically, this part:

Returns a url reference to the asset.

asset-url("rails.png") returns url(/assets/rails.png) As a convenience, for each of the following asset classes there are corresponding -path and -url helpers: image, font, video, audio, javascript, stylesheet.

image-path("rails.png") returns "/assets/rails.png" image-url("rails.png") returns url(/assets/rails.png)

It looks like you need to remove the /assets part in your font-url.

Answer 2

 asset-url($relative-asset-path) Returns a url reference to the asset. asset-url("rails.png") returns url(/assets/rails.png) 

As a convenience, for each of the following asset classes there are corresponding -path and -url helpers: image, font, video, audio, javascript, stylesheet.

• image-path("rails.png") returns "/assets/rails.png"
• image-url("rails.png") returns url(/assets/rails.png)

https://github.com/rails/sass-rails

@font-face {
   font-family: 'Pe-icon-7-stroke';
     src: font-url('Pe-icon-7-stroke.eot?d7yf1v');
     src: font-url('Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'), 
       font-url('Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
       font-url('Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
       font-url('Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
   font-weight: normal;
   font-style: normal;
}

Although you might want to consider if you really need all those fallback formats today.

• https://css-tricks.com/snippets/css/using-font-face/
• http://caniuse.com/#feat=woff