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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With