Heroku font assets not working

Question

Placed fonts in app/assets/fonts

Added

Add the fonts path
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')

Precompile additional assets
config.assets.precompile += %w( .svg .eot .woff .ttf )

in production.rb and development.rb

Fonts linked in css like:

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

Seems to work in development. But in HEROKU is does not seem to work. It cannot find /assets/icomoon.eot .

The solution in this link does not seem to work

Using fonts with Rails asset pipeline

Answer 1

Assets like fonts will work on development but not production if you are using regular old css to locate your assets rather than the asset pipeline helpers. Rails 4 added breaking changes to the asset pipeline to encourage people to use it properly, and not use the old css method of referencing assets.

To resolve this, you need to use the new asset pipeline helpers to point to the fingerprinted, cached versions of your fonts. Rather than url (which does not use the asset pipeline), you need to use font-url (which does use it). To do this, you may have to use Sass or embed ERB in your stylesheet.

Example (using SCSS):

@font-face {   font-family: 'Icomoon';   src: font-url("/assets/icomoon.eot");   src: font-url("/assets/icomoon.eot?#iefix") format("embedded-opentype"), font-url("/assets/icomoon.svg#icomoon") format("svg"), font-url("/assets/icomoon.woff") format("woff"), font-url("/assets/icomoon.ttf") format("truetype");   font-weight: normal;   font-style: normal; } 

See here: http://guides.rubyonrails.org/asset_pipeline.html#coding-links-to-assets

Answer 2

In light of the comments received on this answer (and the unnecessary downvotes) I've amended my answer as follows:

It seems Rails has now created a way to handle fonts in the assets folder. It's called font-path and works like this:

If you add a custom font to your /assets/fonts folder, you can use the font-path helper to access the files within. This can then be used in your stylesheets & other assets using the font-path helper:

|-app/ |---assets/ |-----fonts/ |-----images/ |-----javascripts/ |-----stylesheets/  @font-face {   font-family:'icofonts';   src:font-url('icofonts.eot');   src:font-url('icofonts.eot?#iefix') format('embedded-opentype'),    ... }  

This works for precompiled assets (which Heroku does anyway), and static assets. If you want the pre-Rails 4 way of achieving this, please refer to my answer below:

---

We've got fonts working on Heroku here: http://firststop.herokuapp.com (it's in demo still)

Here is our CSS for it:

#assets/application.css /*-- Akagi Font --*/ @font-face {     font-family: 'akagi';     src: url('fonts/akagi-th-webfont.eot'),     src: url('fonts/akagi-th-webfont.eot?#iefix') format('embedded-opentype'),          url('fonts/akagi-th-webfont.woff') format('woff'),          url('fonts/akagi-th-webfont.ttf') format('truetype'),          url('fonts/akagi-th-webfont.svg#akagithin') format('svg');     font-weight: 300;     font-style: normal;  } @font-face {     font-family: 'akagi';     src: url('fonts/akagi-bk-webfont.eot');     src: url('fonts/akagi-bk-webfont.eot?#iefix') format('embedded-opentype'),          url('fonts/akagi-bk-webfont.woff') format('woff'),          url('fonts/akagi-bk-webfont.ttf') format('truetype'),          url('fonts/akagi-bk-webfont.svg#akagibook') format('svg');     font-weight: 400;     font-style: normal;  } @font-face {     font-family: 'akagi';     src: url('fonts/akagi-sb-webfont.eot');     src: url('fonts/akagi-sb-webfont.eot?#iefix') format('embedded-opentype'),          url('fonts/akagi-sb-webfont.woff') format('woff'),          url('fonts/akagi-sb-webfont.ttf') format('truetype'),          url('fonts/akagi-sb-webfont.svg#akagisemibold') format('svg');     font-weight: 500;     font-style: normal;  } 

We put our fonts into the /stylesheets/fonts folder

We just do the standard precompile fonts stuff to get all CSS working on Heroku, and it works. I suspect your paths are not correct. Maybe try moving your fonts directory into your /assets/stylesheets folder :)

Answer 3

Actually, I just tried the solution proposed in this comment, and it worked perfectly. Seems you only have to change the regex for the precompile instruction in order for Heroku to correctly find the asset.

i.e. change config.assets.precompile += %w( .svg .eot .woff .ttf ) to config.assets.precompile << /\.(?:svg|eot|woff|ttf)$/.

Edit: It might also be necessary to add RAILS_ENV=production when you run the assets:precompile rake task, as per Heroku's docs.