0

I'm trying to add a custom font to rails and no matter what I do it doesn't seem to work, I've read a few other questions on github about this issue but I cant get it to work for myself.

I have put the font file into

app/assets/fonts

the name of the file is called "above.tff" and I have declared it in my CSS like this

@font-face {
  font-family: 'above';
  src: url(/assets/above.tff) format('truetype');
}

Which is how the top answer in this question says to do so Official way of adding custom fonts to Rails 4?

And then I apply it to the element using

font-family: 'above';

And it doesn't work and I get this error on my console.

ActionController::RoutingError (No route matches [GET] "/assets/above.tff"):

actionpack (5.1.4) lib/action_dispatch/middleware/debug_exceptions.rb:63:in `call'
web-console (3.5.1) lib/web_console/middleware.rb:135:in `call_app'
web-console (3.5.1) lib/web_console/middleware.rb:28:in `block in call'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `catch'
web-console (3.5.1) lib/web_console/middleware.rb:18:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/show_exceptions.rb:31:in `call'
railties (5.1.4) lib/rails/rack/logger.rb:36:in `call_app'
railties (5.1.4) lib/rails/rack/logger.rb:24:in `block in call'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `block in tagged'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:26:in `tagged'
activesupport (5.1.4) lib/active_support/tagged_logging.rb:69:in `tagged'
railties (5.1.4) lib/rails/rack/logger.rb:24:in `call'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `block in call'
activesupport (5.1.4) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.4) lib/active_support/logger.rb:63:in `block (3 levels) in broadcast'
activesupport (5.1.4) lib/active_support/logger_silence.rb:20:in `silence'
activesupport (5.1.4) lib/active_support/logger.rb:61:in `block (2 levels) in broadcast'
sprockets-rails (3.2.1) lib/sprockets/rails/quiet_assets.rb:11:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/remote_ip.rb:79:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/request_id.rb:25:in `call'
rack (2.0.3) lib/rack/method_override.rb:22:in `call'
rack (2.0.3) lib/rack/runtime.rb:22:in `call'
activesupport (5.1.4) lib/active_support/cache/strategy/local_cache_middleware.rb:27:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/executor.rb:12:in `call'
actionpack (5.1.4) lib/action_dispatch/middleware/static.rb:125:in `call'
rack (2.0.3) lib/rack/sendfile.rb:111:in `call'
railties (5.1.4) lib/rails/engine.rb:522:in `call'
puma (3.11.0) lib/puma/configuration.rb:225:in `call'
puma (3.11.0) lib/puma/server.rb:624:in `handle_request'
puma (3.11.0) lib/puma/server.rb:438:in `process_client'
puma (3.11.0) lib/puma/server.rb:302:in `block in run'
puma (3.11.0) lib/puma/thread_pool.rb:120:in `block in spawn_thread'
mkrieger1
  • 19,194
  • 5
  • 54
  • 65
firewire167
  • 141
  • 1
  • 3
  • 12

1 Answers1

1

Try this font-url method is available which correctly routes and checks the assets/fonts directory

@font-face {
  font-family: 'above';
  src: font-url('above.tff') format('truetype');
}

A couple of things,

  1. I really doubt the filename would be above.tff haven't see tff extension for fonts before, could be a typo, but i think it should be ttf

  2. after changing to the above code, rename your css file to have an extension of scss

Alfie
  • 2,706
  • 1
  • 14
  • 28
  • Thanks so much Alfie it worked perfectly! and yeah tff was just a typo when I was putting it on here, I had it as ttf in my css. – firewire167 Dec 08 '17 at 21:35