Rails 4 can't find fonts in production

Question

Scenario: I have a Rails 4.0.0 application, deploying with capistrano, which precompiles my assets on my production server.

Problem: I'm trying to add a font and use it with @font-face. It works locally, but not in production.

Error message: "Failed to load resource: the server responded with a status of 404 (Not Found) "

My fonts are located in app/assets/fonts/

My relevant files:

app/assets/stylesheets/application.css.scss:

/*
 * This is a manifest file yada yada yada...
 *
 *= require bootstrap
 *= require_self
 *= require_tree .
 */

@font-face {
  font-family: 'stone_sansregular';
  src: url(font-path('stone_sans_regular-webfont.eot') + "?#iefix") format('embedded-opentype'),
    url(font-path('stone_sans_regular-webfont.woff')) format('woff'),
    url(font-path('stone_sans_regular-webfont.ttf'))  format('truetype'),
    url(font-path('stone_sans_regular-webfont.svg') + "#stone_sansregular") format('svg');
}

config/application.rb:

config.assets.paths << Rails.root.join("app", "assets", "fonts")

I have looked for answers in several SO posts and other sources but I can't seem to get it right. Btw, I am not deploying on Heroku. What am I missing? I appreciate your help.

EDIT: In production, I find the fonts where I assume they should be: my-rails-app/current/public/@assets/fonts

Disaffect

Is this the real file extension -> app/assets/stylesheets/application.css.scss.css ? It should only be .css.scss – Headliner

Oh sorry, no it's just .css.scss (edited) – Disaffect

I wonder, could it have anything to do with the MD5 hash that is added to the file names after compilation? Because in the console it sort of looks like it tries to find the file without that extension, just like when running locally. – Disaffect

@Disaffect ever find a solution to this? – Katsuyama

Answer 1

I just recently fixed a similar issue once I realized my font-awesome.css file was not actually getting loaded in production. I had to do

*= require font-awesome.css

instead of

@import "font-awsome.css";

in my application.css.scss manifest.

Also, as for the MD5 hash that gets added on to file names, I'm not sure if that is an issue or not, but I ended up doing:

font-url('fontawesome-webfont.eot');

rather than

url(font-path('fontawesome-webfont.eot')

So if that was even an issue, I'm fairly certain using font-url will handle it properly.

Katsuyama

This guy knows what he's talking about! – Ilona

font-url is no longer available. guides.rubyonrails.org/… – Conservation