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/

If your css and your fonts are in the same assets directory you don't need to call /assets again, so for example: "Pe-icon-7-stroke.eot" not "/assets/Pe-icon-7-stroke.eot". To go up a directory you'd need to use "../directory above assets" anyway. — Nathaniel Flick, Feb 24 '16 at 00:05

score 3 · Answer 1 · answered Feb 24 '16 at 00:12

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.

score 2 · Accepted Answer · answered Feb 24 '16 at 00:12

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.

custom font not loading on heroku with rails pipeline

2 Answers2