Rails 4: Why are fonts not loading in production?

Question

I can't load fonts in my Rails 4 app in production, it works normally in development.

Assets are precompiled on the server while deploying.

I have my fonts in

app/assets/fonts

My app.css:

@font-face {
    font-family: 'WalkwayBoldRegular';
    src: url('Walkway_Bold-webfont.eot');
    src: url('Walkway_Bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('Walkway_Bold-webfont.woff') format('woff'),
         url('Walkway_Bold-webfont.ttf') format('truetype'),
         url('Walkway_Bold-webfont.svg#WalkwayBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

In my production.rb I have:

config.assets.precompile << Proc.new { |path|
  if path =~ /\.(eot|svg|ttf|woff)\z/
    true
  end
}

Answer 1

We had this problem last week - the problem is that your assets will be compiled to have MD5 hashes on them, whilst your standard CSS will still be looking for their "standard" names. This is a problem with images & fonts.

@font-face {
    font-family: 'akagi';
    src: asset_url('fonts/akagi-th-webfont.eot');
    src: asset_url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),
         asset_url('fonts/akagi-th-webfont.woff') format('woff'),
         asset_url('fonts/akagi-th-webfont.ttf') format('truetype'),
         asset_url('fonts/akagi-th-webfont.svg#akagithin') format('svg');
    font-weight: 300;
    font-style: normal;
}

This is an example of how you should use scss files to load assets dynamically. These files are compiled (either before push or during init) into your .css files, all with their assets correctly synced.

We had a similar problem to you with Heroku, and managed to get it working by putting our files into /stylesheets/layout/fonts.css.scss and then calling

@import '/layout/fonts';

We also called our application.css -> application.css.scss to support the @import function