Using @font-face with Ruby on Rails?

Question

I am trying to include my custom font in Rails.

My file fonts are in app/assets/fonts/.

I edited CSS:

# in app/assets/stylesheets/application.css

@font-face {
  font-family: 'fontello';
  src: url('fonts/fontello.eot');
  src: url('fonts/fontello.eot#iefix')format('embedded-opentype'),
       url('fonts/fontello.woff') format('woff'),
       url('fonts/fontello.ttf') format('truetype');
}

I tried to change the path url('assets/fonts/fontello.eot'); url('fontello.eot'); too.

I edited the config:

# in config/application.rb

require File.expand_path('../boot', __FILE__)
require 'rails/all'

Bundler.require(:default, Rails.env)

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

But it doesn't work.

I use Rails 4.0.2.

see this http://stackoverflow.com/questions/7973271/using-font-face-with-rails-3-1-app — Rahul Singh, Jan 04 '14 at 20:40

Yann VERY · Accepted Answer · 2014-01-04T20:54:56.273

12

You need to use asset_path for use an asset in a css file ( add erb extension to your application.css file then asset_path are available in your CSS rules)

@font-face {
  font-family: 'fontello';
  src: url('<%= asset_path("fontello.eot") %>');
  src: url('<%= asset_path("fontello.eot#iefix") %>') format('embedded-opentype'),
       url('<%= asset_path("fontello.woff") %>') format('woff'),
       url('<%= asset_path("fontello.ttf") %>') format('truetype');
}

edited Jan 04 '14 at 20:54

answered Jan 04 '14 at 20:41

Yann VERY

1,819
14
11

I modified file name `app/assets/stylesheets/application.css` to `app/assets/stylesheets/application.css.erb` and I replaced your lines... but dont work :( – josper04 Jan 04 '14 at 21:31
1

Try to add `scss` extension to add sass capabilities like this : `application.css.scss.erb` – Yann VERY Jan 04 '14 at 21:36

score 2 · Answer 2 · edited May 23 '17 at 11:51

I would encourage you to check out this answer from a similar post --

Start by putting your fonts into app/assets/fonts. After that, you can include your fonts in a sass / scss file via the font-url('font.eot') helper.

Otherwise, asset_path should still find the fonts there if you're determined to use it.

Integrating @font-face files into rails asset pipeline

Thanks to:

https://stackoverflow.com/users/120434/andrew-nesbitt

and

https://stackoverflow.com/users/753177/john