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

The font url helper is actually named `font_url` - notice the underscore instead of the dash sign. — eugen, Nov 26 '14 at 11:42
OK, I changed it. Still the same. Thank you for try. I will keep on digging. — zombie_ghast, Nov 26 '14 at 12:32

score 20 · Answer 1 · edited May 23 '17 at 11:46

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:

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.
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!

As a workaround, putting `fonts/` in `public` serves me well for the moment. Must dig a little more later to put them back to `assets/` but now that the deadline draws near... I will leave them there — WesternGun, Dec 03 '17 at 21:45
@FaithReaper Thanks for confirming that putting them in the public directory works. — Joshua Pinter, Dec 04 '17 at 02:32
I wrote the font file name (e.g. ```amaze.ttf```) without giving the path alongside the name, and it worked for me. My fonts are placed inside ```assets/fonts/``` — Muhammad Zubair, May 25 '21 at 10:09

score 4 · Answer 2 · edited May 23 '17 at 12:09

I have also face this problem with font-awesome but it is my general research for fonts.

I create a new directory under app/assets , named fonts. Then copy all the Fonts there and include it to the assets in application.rb file , like this :

config.assets.paths << Rails.root.join("app", "assets", "fonts")

rename your font-awesome.css to font-awesome.css.scss.erb and change the @font-face declaration in it like this

    @font-face { font-family: "FontAwesome"; src: url('<%= asset_path('fontawesome-webfont.eot')%>'); 
src: url('<%= asset_path('fontawesome-webfont.eot?#iefix')%>') format('eot'), 
     url('<%= asset_path('fontawesome-webfont.woff')%>') format('woff'), 
     url('<%= asset_path('fontawesome-webfont.ttf')%>') format('truetype'), 
     url('<%= asset_path('fontawesome-webfont.svg#FontAwesome')%>') format('svg');
     font-weight: normal; font-style: normal; }

Hope this will helpful :) There are more ref Font-face

score 0 · Answer 3 · answered Jul 13 '17 at 23:31

0

For me it was a file permission error, I had copied the files from another computer. once I fixed the permissions, it worked.

answered Jul 13 '17 at 23:31

user8304859

1

score 0 · Answer 4 · edited Jan 16 '19 at 07:36

0

For me, it was as simple as my import in application.scss used https// instead of https:// for the URL. Gotta read closely next time.

edited Jan 16 '19 at 07:36

veben

19,637
14
60
80

answered Jan 16 '19 at 07:09

Jackson Chui

1
1

score 0 · Answer 5 · answered Jan 17 '19 at 00:06

0

Thanks guys.

I found a solution, why not put fonts/*.ttf into app/assets/images/fonts/*.ttf for dev env?

At the same time keep config/environments/development.rb still the default config.serve_static_assets = false false value.

This works for me.

answered Jan 17 '19 at 00:06

Lane

4,682
1
36
20

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

(kind of) FIXED a PROBLEM

5 Answers5

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

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