2

The title pretty much says it all...

I tried adding /app/assets/fonts/font.woff and referencing it from my css file with /app/assets/fonts/font.woff but it doesn't seem to work.

Any ideas?

emersonthis
  • 32,822
  • 59
  • 210
  • 375
  • 1
    Did you just add the .woff file or did you write some code to reference it? Your question lacks some info... – Justin D. Aug 16 '13 at 20:57
  • @JustinD. I try to reference those files from my css file by adjusting the paths manually like `/app/assets/fonts/...` but it's not working. Seems like Rails is getting in the way. – emersonthis Aug 16 '13 at 21:46
  • http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app – James Lim Aug 16 '13 at 21:47
  • @JimLim That's for Rails 3.1. Does any of that apply to 4.0? I'm new to rails but I've already encountered a LOT of differences between early 3.x and 4.0. – emersonthis Aug 16 '13 at 21:50
  • Yea, it can get confusing. When following links, make sure you are looking at the Rails 4 guides and reading the Rails 4 api. APIDock does a good job of showing changes across versions. – James Lim Aug 16 '13 at 21:52

2 Answers2

7

It turns out that the asset pipeline that @JimLim mentioned works a bit differently in Rails 4. Full docs here, but here's the relevant excerpt:

2 How to Use the Asset Pipeline

In previous versions of Rails, all assets were located in subdirectories of public such as images, javascripts and stylesheets. With the asset pipeline, the preferred location for these assets is now the app/assets directory. Files in this directory are served by the Sprockets middleware.

Assets can still be placed in the public hierarchy. Any assets under public will be served as static files by the application or web server. You should use app/assets for files that must undergo some pre-processing before they are served.

In production, Rails precompiles these files to public/assets by default. The precompiled copies are then served as static assets by the web server. The files in app/assets are never served directly in production.

So I ended up moving my /fonts directory into /public adjusting my paths in the @font-face declaration accordingly and everything works fine.

emersonthis
  • 32,822
  • 59
  • 210
  • 375
3

You have to tell Rails to include your fonts directory in the asset pipeline, as follows:

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

Finally, let Rails figure out the correct path for you, so you don't have to mess with the prefix app, app/assets etc. Add a .erb extension to your css/scss file e.g. application.css.erb, and use embedded ruby:

src: url("<%= asset_path('fonts.woff') %>");

(Related question)

Community
  • 1
  • 1
James Lim
  • 12,915
  • 4
  • 40
  • 65