0

Both locally and in heroku I am having issues with my fonts.

Rails 4.2.5.1

My fonts are in the app/fonts folder:

/app/assets/fonts/fontawesome-webfont.eot
/app/assets/fonts/fontawesome-webfont.svg
/app/assets/fonts/fontawesome-webfont.ttf
/app/assets/fonts/fontawesome-webfont.woff
/app/assets/fonts/fontawesome-webfont.otf

The error message:

Started GET "/assets/fonts/fontawesome-webfont.ttf?v=4.2.0" for ::1 at 2016-06-01 22:12:24 -0400

ActionController::RoutingError (No route matches [GET] "/assets/fonts/fontawesome-webfont.ttf"):
  actionpack (4.2.5.1) lib/action_dispatch/middleware/debug_exceptions.rb:21:in `call'
  web-console (2.3.0) lib/web_console/middleware.rb:28:in `block in call'
  web-console (2.3.0) lib/web_console/middleware.rb:18:in `catch'
  web-console (2.3.0) lib/web_console/middleware.rb:18:in `call'
  actionpack (4.2.5.1) lib/action_dispatch/middleware/show_exceptions.rb:30:in `call'
  railties (4.2.5.1) lib/rails/rack/logger.rb:38:in `call_app'
  railties (4.2.5.1) lib/rails/rack/logger.rb:20:in `block in call'
  activesupport (4.2.5.1) lib/active_support/tagged_logging.rb:68:in `block in tagged'

config/initializers/assets.rb has:

Rails.application.config.assets.version = '2.0'

What could the issue be here, very confused?

Blankman
  • 259,732
  • 324
  • 769
  • 1,199

3 Answers3

4

Although Rails has you store your assets in assets/javascripts, assets/stylesheets, assets/fonts, or whatever, those directories do not map directly to URLs. Instead everything is served from just /assets. So in your browser's location bar type http://localhost:3000/assets/fontawesome-webfont.ttf and I bet you'll get the font.

So you should find whatever is referencing the font, and fix the URL there (probably in a CSS file). BUT note that in production Rails also mangles the names of these assets to make them more cachable, so the correct URL in production will be something like http://example.com/assets/fontawesome-webfont-asdfasasdfadsfadfsasf23kjksdjkasdfadsf.ttf. You can make sure you always get the right URL by using the asset_path helper. There is also asset_url, image_path, etc. There is even font_path!

Paul A Jungwirth
  • 23,504
  • 14
  • 74
  • 93
  • so I should use font_path in my stylesheet, I have to rename it from .css to .scss to use font_path right? – Blankman Jun 02 '16 at 03:30
  • Will something like this work? ```font_url('fontawesome-webfont.eot?v=4.2.0')``` ? seems to be complaining about a bad URI – Blankman Jun 02 '16 at 03:35
  • I would leave out the query parameter part and just say `font_url('fontawesome-webfont.eot')`. Also is this an scss file? In that case it should be `font-url` (hyphen not underscore). Or if it's an erb file then you need to surround the helper in erb tags: `<%= font_url('...') %>`. – Paul A Jungwirth Jun 02 '16 at 04:00
  • Also here is a very thorough answer about using fonts in scss files in Rails: http://stackoverflow.com/questions/10905905/using-fonts-with-rails-asset-pipeline – Paul A Jungwirth Jun 02 '16 at 04:02
0

The fonts folder is not loaded along with the other Rails asset pipeline folders in the asset so pipeline so you need to first add it to it.

In your config/application.rb file add this line:

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

inside the Application class like this

class Application < Rails::Application
  config.assets.paths << Rails.root.join("app", "assets", "fonts")
end

this will allow the font folder to be loaded on application start along with the remaining folders

then in your css file, change all src: url("/assets/fonts/font_name.format"); to src: url("/assets/font_name.format");

That should do the trick.

ollaollu
  • 473
  • 7
  • 19
0

I removed the font awesome css from my project and just added the darn gem and it works :)

Blankman
  • 259,732
  • 324
  • 769
  • 1,199