WeezHard
WeezHard

Reputation: 2022

Rails 4 fonts not working on production

I am trying to use fonts Awesome on my Rails 4 application. The fonts works very well on Development, But on Production is not working.

Assets are precompiled on the server while deploying with capistrano.

All CSSs files, JS (at app/assets/* and vendor/assets/*) are working... only fonts are not.

If I run the application on my development machine as production, it works:

RAILS_ENV=production bin/rails s -b 0.0.0.0

Only when I send to my production host (VPS with Passenger+Ngnix), that the fonts dont works

what I have is:

# config/initializers/assets.rb

# Add additional assets to the asset load path
# Rails.application.config.assets.paths << Emoji.images_path
Rails.application.config.assets.precompile << /\.(?:svg|eot|woff|woff2|ttf)\z/

And...

# config/environments/production.rb
# ...
config.assets.compile = true

Ad finally:

# app/assets/stylesheets.css.erb

@font-face {
    font-family: 'FontAwesome';
    src: url("<%= font_path('Font-Awesome/fontawesome-webfont.eot') %>?v=4.3.0");
    src: url("<%= font_path('Font-Awesome/fontawesome-webfont.eot') %>?#iefix&v=4.3.0") format('embedded-opentype'),
    url("<%= font_path('Font-Awesome/fontawesome-webfont.woff2') %>?v=4.3.0") format('woff2'),
    url("<%= font_path('Font-Awesome/fontawesome-webfont.woff') %>?v=4.3.0") format('woff'),
    url("<%= font_path('Font-Awesome/fontawesome-webfont.ttf') %>?v=4.3.0") format('truetype'),
    url("<%= font_path('Font-Awesome/fontawesome-webfont.svg') %>?v=4.3.0#fontawesomeregular") format('svg');
    font-weight: normal;
    font-style: normal;
 }

The fonts are located at: vendor/assets/fonts/Font-Awesome/fontawesome-*

What I dont understand is that on Development it works and I have another app on Heroku with the same configuration and the fonts works very well.

If I go to my server using SSH and run ls my_app/public/assets, I can see all my assets (css, javascripts and fons) pre-compiled.

What I am missing?

Upvotes: 2

Views: 1164

Answers (1)

WeezHard
WeezHard

Reputation: 2022

I tried a lot of solutions, but nothing worked..

The only one that works was move the folder "fonts" from vendor/assets to app/assets.

This don't make sense to me, as I know, third-party assets must go to vendor/assets folder.

But the third CSS and Javascript files, are located at vendor/assets/* and works fine. Only fonts files that wont work.

Upvotes: 1

Related Questions