CODEWITHSUNDEEP
cssruby-on-railsheroku
Thalatta
Thalatta

Reputation: 4578

custom font not loading on heroku with rails pipeline

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/

Upvotes: 0

Views: 960

Answers (2)

max
max

Reputation: 102433

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.

Upvotes: 2

David T
David T

Reputation: 83

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.

Upvotes: 3

Related Questions