Heroku and @font-face - embedded fonts wont displa

Question

I have a few licensed fonts that I have embedded into my Rails app using the CSS @font-face tag. These fonts are located in the "../Public/Fonts/" path in my Rails 3 app and render perfectly on any local machine that I pull down the repo and run on.

However when I push my app to Heroku it can't seem to find the fonts. You can tell that it's looking in the font directory but can never access them. It doesn't seem to matter where I place the fonts or how I type the font path in the @font-face declaration.

My fonts are located at #{RAILS.root}/public/fonts/ChunkFive

Here is my @font-face declaration:

@font-face {
font-family: "ChunkFive";
src: url("../fonts/ChunkFive/ChunkFive-webfont.eot");
src: local("?"),
url("../fonts/ChunkFive/ChunkFive-webfont.woff") format("woff"),
url("../fonts/ChunkFive/ChunkFive-webfont.ttf") format("truetype"),
url("../fonts/ChunkFive/ChunkFive-webfont.svg") format("svg");
}

Here is the 404 resource not found message I get for each font:

Request URL:http://thedanbarrett.heroku.com/fonts/ChunkFive/ChunkFive-webfont.woff
Request Method:GET
Status Code:404 Not Found
Request Headers
Referer:http://thedanbarrett.heroku.com/home
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.1; en-US) AppleWebKit/534.10 
(KHTML,like Gecko) Chrome/8.0.552.224 Safari/534.10
Response Headers
Age:0
Connection:keep-alive
Content-Length:727
Content-Type:text/html
Date:Wed, 05 Jan 2011 15:25:21 GMT
Server:nginx/0.7.67
Via:1.1 varnish
X-Runtime:0.001344
X-Varnish:764492621

The strange thing is that it finds and loads stylesheets, icons, and images in the same root folder. Just to reiterate the fonts embed and work perfectly run from a local server, even on hosts that don't have the font installed.

I did find one reference online to someone that was having a similar issue who changed their config.ru and environment.rb files to make it friendly with Heroku, but I can't seem to find it.

Thanks in advance SO minions for all your help!

~Dan

Answer 1

Fonts directory: app/assets/fonts/

Add the line below to production.rb

config.serve_static_assets = true

In your styles.css.scss

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

Environment: Rails 4.0.1 Ruby 2.0.0-p247

It should work on heroku :)

Answer 2

So it turned out the root for resources was set to Public/Stylesheets so my path declaration in the font-face section was nonsensicalness. I took the easy out and moved the fonts under the stylesheets directory and everything works perfectly now!

Answer 3

Here's an example that is working on Heroku: http://www.arailsdemo.com/posts/12

Here is the corresponding stylesheet http://www.arailsdemo.com/stylesheets/application.css

I don't remember needing any configuration changes. Hopefully, it helps.