CODEWITHSUNDEEP
ruby-on-rails
bigpotato
bigpotato

Reputation: 27557

Rails 4.1.1 Production: asset_path not working for fonts?

I'm trying to load glyphicons. In development it's working, since I don't have to precompile anything. But in production it doesn't load. The browser console says:

"NetworkError: 404 Not Found - http://production.site.com/assets/glyphicons-halflings-regular.ttf"

Here's the line of my glyphicons.scss file:

@font-face{font-family:'Glyphicons Halflings';src:url(asset_path('/assets/glyphicons-halflings-regular.eot'));src:url(asset_path('/assets/glyphicons-halflings-regular.eot?#iefix')) format('embedded-opentype'),url(asset_path('/assets/glyphicons-halflings-regular.woff')) format('woff'),url(asset_path('/assets/glyphicons-halflings-regular.ttf')) format('truetype'),url(asset_path('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular')) format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}

My fonts folder is in app/assets:

app/
  assets/
  ├── fonts
  │   ├── glyphicons-halflings-regular.eot
  │   ├── glyphicons-halflings-regular.svg
  │   ├── glyphicons-halflings-regular.ttf
  │   └── glyphicons-halflings-regular.woff

And in my application.rb file I have this:

config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( *.svg *.eot *.woff *.ttf )

Isn't that all I have to do? I don't get where Rails is looking for the fonts at? How can I fix this?

==UPDATE== From Mandeep's suggestions:

application.rb file:

# config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile += %w( *.svg *.eot *.woff *.ttf )

glyphicons.scss

@font-face{font-family:'Glyphicons Halflings';src:font-url('/assets/glyphicons-halflings-regular.eot');src:font-url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),font-url('/assets/glyphicons-halflings-regular.woff') format('woff'),font-url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),font-url('/assets/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}.glyphicon{position:relative;top:1px;display:inline-block;font-family:'Glyphicons Halflings';font-style:normal;font-weight:normal;line-height:1;-webkit-font-smoothing:antialiased;}

I pushed my code and redeployed, but it still doesn't work

Upvotes: 1

Views: 324

Answers (1)

Mandeep
Mandeep

Reputation: 9173

Since you are using rails > 4 so you don't need to add fonts folder in assets as it's by default added in assets. Also you are using sass so you can use font-url helper. If you look at docs it says:

When using the asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.

So you can use it like this:

src: font-url('glyphicons-halflings-regular.eot');

Upvotes: 1

Related Questions