Using @font-face with Rails 3.1 app?

Question

I'm having trouble using the following @font-face declaration to work with my Rails 3.1 app. I put the fonts in the Asset Pipeline in its own folder called "Fonts" alongside images and stylesheets and javascripts

Here is the declaration I used (generated by Font Squirrel.)

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url('Chunkfive-webfont.eot');
  src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     url('Chunkfive-webfont.woff') format('woff'),
     url('Chunkfive-webfont.ttf') format('truetype'),
     url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Anyone successfully utilize @font-face on their Rails 3.1 app?

Update

I just read this thread http://spin.atomicobject.com/2011/09/26/serving-fonts-in-rails-3-1/ that said to change url to font-url in the declarations. That didn't seem to work either unfortunately.

Answer 1

I know this is an old question, but I just stumbled across this issue with rails 3.2, and after reading the link to the documentation posted previously, there was no need to edit the application.rb. All I needed to do was do the following in my stylesheet (using sass)

@font-face {
    font: {
       family: 'Junction';
       weight: 'normal';
       style: 'normal';
    }
    src: asset-url('Junction-webfont.eot', font);
    src: asset-url('Junction-webfont.eot', font) format('embedded-opentype'),
         asset-url('Junction-webfont.woff', font) format('woff'),
         asset-url('Junction-webfont.ttf', font) format('truetype'),
         asset-url('Junction-webfont.svg#JunctionRegular', font) format('svg')
}

So instead of using url, I used the generic asset-url, which takes 2 arguments, the file and the asset class, in this case 'font'.

Answer 2

Using Rails 4.0 (don't know if this is specific to 4, but anyway), I was only able to make it work with url(font_path('font-name.ttf')). Adding the fonts path to the assets path was not necessary either (config.assets.paths << "#{Rails.root}/app/assets/fonts").

So, to me this is what worked:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(font_path('Chunkfive-webfont.eot'));
  src: url(font_path('Chunkfive-webfont.eot?#iefix')) format('embedded-opentype'),
     url(font_path('Chunkfive-webfont.woff')) format('woff'),
     url(font_path('Chunkfive-webfont.ttf')) format('truetype'),
     url(font_path('Chunkfive-webfont.svg#ChunkFiveRegular')) format('svg');
  font-weight: normal;
  font-style: normal;
}

Answer 3

From Rails 3.1 and above you can call font-url directly. Like this:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: font-url('Chunkfive-webfont.eot');
  src: font-url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'),
     font-url('Chunkfive-webfont.woff') format('woff'),
     font-url('Chunkfive-webfont.ttf') format('truetype'),
     font-url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

Expect your final css to look like that:

@font-face {
  font-family: 'ChunkFiveRegular';
  src: url(/assets/Chunkfive-webfont.eot);
  src: url(/assets/Chunkfive-webfont.eot?#iefix) format('embedded-opentype'),
     url(/assets/Chunkfive-webfont.woff) format('woff'),
     url(/assets/Chunkfive-webfont.ttf) format('truetype'),
     url(/assets/Chunkfive-webfont.svg#ChunkFiveRegular) format('svg');
  font-weight: normal;
  font-style: normal;
}

Usually works :)

Answer 4

You have to add the folder to the assets path (to file config/application.rb), see Rails Guides

config.assets.paths << "#{Rails.root}/app/assets/fonts"

And you should use the asset_path helper:

src: url('<%= asset_path('Chunkfive-webfont.eot') %>');

Answer 5

I just updated that article on Atomic Object's Spin blog. Here is the CSS converted (You were looking at the Sass syntax)

@font-face {
  font-family: "Merriweather";
  src: url(/assets/merriweather-black-webfont.eot);
  src: local("Merriweather Heavy"), local("Merriweather-Heavy"), url(/assets/merriweather-black-webfont.eot?#iefix) format("embedded-opentype"), url(/assets/merriweather-black-webfont.woff) format("woff"), url(/assets/merriweather-black-webfont.ttf) format("truetype"), url(/assets/merriweather-black-webfont.svg#MerriweatherHeavy) format("svg");
  font-weight: 900;
  font-style: normal;
}

Answer 6

While this is late, you could use Compass's +font-face mix-in to avoid all this trouble. The mixin helps your life easier by

1. Not remember the awful caveats of the traditional font-face decleration

2. It internally handles url_helper and format declarations for you

3. It's far easier to remember

It is declared the following way madams and gentlemen:

+font-face("#{$font-name}",
  font-files("#{$font-name}.woff", woff, 
  "#{$fontFileName}.ttf", ttf, 
  "#{$fontFileName}.svg", svg), "#{$fontFileName}.eot", normal, normal);