CODEWITHSUNDEEP
cssruby-on-railsherokufonts
Gandalf StormCrow
Gandalf StormCrow

Reputation: 26202

Adding fonts to assets pipeline rails 4.2.x

I'm trying to deploy my app on heroku but still fonts are not loading, this is my relevant font sass :

@font-face
  font-family: 'FontAwesome'
  src: url('fontawesome-webfont.eot?v=4.4.0')
  src: url('fontawesome-webfont.eot?#iefix&v=4.4.0') format("embedded-opentype"), url('fontawesome-webfont.woff2?v=4.4.0') format("woff2"), url('fontawesome-webfont.woff?v=4.4.0') format("woff"), url('fontawesome-webfont.ttf?v=4.4.0') format("truetype"), url('fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format("svg")
  font-weight: normal
  font-style: normal

And I have these fonts mentioned above here at app/assets/fonts. Then I have assets initializer :

Rails.application.config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

What can I do to address this issue, this seems to be a common issue, but none of the common solution work, any suggestions?

Upvotes: 3

Views: 730

Answers (2)

IngoAlbers
IngoAlbers

Reputation: 5802

Instead of url you should use asset-url in sass.

See here for more information: https://github.com/rails/sass-rails#user-content-asset-helpers

So this should work:

@font-face {
  font-family: 'FontAwesome'
  src: asset-url('fontawesome-webfont.eot?v=4.4.0')
  src: asset-url('fontawesome-webfont.eot?#iefix&v=4.4.0') format("embedded-opentype"), asset-url('fontawesome-webfont.woff2?v=4.4.0') format("woff2"), asset-url('fontawesome-webfont.woff?v=4.4.0') format("woff"), asset-url('fontawesome-webfont.ttf?v=4.4.0') format("truetype"), asset-url('fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format("svg")
  font-weight: normal
  font-style: normal
}

Upvotes: 5

Sean Huber
Sean Huber

Reputation: 3985

If your assets are precompiled you should use Rails' asset_path helper. Change your scss file to scss.erb and modify your @font-face block to something like this:

@font-face {
  font-family: 'FontAwesome';
  src: url(<%= asset_path 'fontawesome-webfont.eot?v=4.4.0' %>);
  src: url(<%= asset_path 'fontawesome-webfont.eot?#iefix&v=4.4.0' %>) format('embedded-opentype'),
  /* etc... */
}

Upvotes: 0

Related Questions