Rails 4.1 - ActionController::RoutingError (No route matches [GET] "/fonts/....ttf") - @font-face issues

Question

I feel like I tried all solutions I found here and on some blogs but something is still wrong and I have no idea what.

My error:

...
Started GET "/fonts/amaze.ttf" for 83.9.18.180 at 2014-11-26 09:10:21 +0000
...
app[web.1]: ActionController::RoutingError (No route matches [GET] "/fonts/amaze.ttf"):
...

Of course on localhost it isn't working either.

I am using rails 4.1.1

My font is located in:

assets/fonts/amaze.ttf

I even relocated it to check if it would work: assets/amaze.ttf -it wasn't.

My current solution in application.css.scss file:

@font-face {
  font-family: 'Amaze';
  src: font-url('amaze.ttf');
}

.amaze {
  font-family: 'Amaze';
}

I tried some configuration in application.rb but had no effect:

config.assets.enabled = true  
config.assets.paths << "#{Rails.root}/app/assets/fonts"  
config.serve_static_assets = true
config.assets.js_compressor = :uglifier
config.assets.compile = true
config.assets.digest = true
config.assets.version = '1.0'
config.assets.paths << Rails.root.join('app', 'assets', 'fonts')
config.assets.precompile << /\.(?:svg|eot|woff|ttf)\z/

Do I even have to configure anything in application or development/production files?

---

EDIT

(kind of) FIXED a PROBLEM

The problem was that I had a broken font...

more details: I had font from here http://fontzone.net/download/amaze-normal and it was broken (I mean not exactly broken, it worked on linux, but not with font-face, no idea why, if it's worth anyone's efforts give it a try to figure out what was the issue)

I tried another font from another source: http://www.fontcubes.com/Amaze.font

and it worked! yey! -

---

EDIT

I had similar issue with more fonts (both otf and ttf) so I would say problem is still open ;p

Answer 1

Utilize the Asset Pipeline or move your fonts to the public directory.

Your problem here is that the path /fonts/amaze.ttf is not hitting the Rails Asset Pipeline. It would need to be prefaced with /assets in order to use the Asset Pipeline, like /assets/fonts/amaze.ttf or /assets/amaze.ttf.

You have two main options here:

1. Update the path request:

   So use /assets/amaze.ttf instead of /fonts/amaze.ttf.

   Be aware that in order for the path /assets/fonts/amaze.ttf to work you would need to put the amaze.ttf font in /app/assets/fonts/fonts/ or /vendor/assets/fonts/fonts/. The double fonts directory ensures there is a fonts directory in /public/assets after the assets are compiled. See this answer for more info.

2. Move your fonts directory to your public directory:

   Since the requested path doesn't utilize the Asset Pipeline anyway, you can simply move your fonts directory to the /public/ directory and the web server will automatically serve it. So your font(s) should be located at /public/fonts/amaze.ttf, etc.

That should do it!