32

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
pruett
  • 2,101
  • 3
  • 22
  • 36

7 Answers7

43

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') %>');
Hengjie
  • 4,598
  • 2
  • 30
  • 35
topek
  • 18,609
  • 3
  • 35
  • 43
  • thanks for the documentation. still doesn't work however :( I wonder if there is something else that im missing – pruett Nov 01 '11 at 22:13
  • I just saw a upper/lower case issue, you spelled Fonts and I fonts. And you should use asset_path in your stylesheet, updated my post – topek Nov 01 '11 at 22:22
  • what does the part of generated stylesheet look like now? – topek Nov 01 '11 at 22:38
  • Invalid CSS after "...unkfive-webfont": expected ")", was ".eot') %>');" – pruett Nov 01 '11 at 22:52
  • 3
    are you using the erb extension? `style.scss.erb` – topek Nov 01 '11 at 22:55
  • Don't forget to restart your development server so it can apply the changes to config/application.rb. I had this problem. – Michael May 14 '12 at 04:23
40

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'.

Greg Stewart
  • 686
  • 8
  • 9
  • where did you place your fonts though? – botbot Sep 19 '12 at 22:35
  • 9
    Font assets go in app/assets/fonts/. Then add this to the Application class in your config/application.rb: `config.assets.paths << "#{Rails.root}/app/assets/fonts"`. Then this answer works beautifully, even in Rails 3.2 – Elle Mundy Oct 13 '12 at 20:42
  • Thanks @DanMundy. `config.asset.paths` + `asset-url` combined are working in Rails v3.2.10. – Dom Jan 08 '13 at 23:08
  • Upgrade to 3.2.11! There's a pretty big security hole in 3.2.10. – Elle Mundy Jan 13 '13 at 23:55
14

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 :)

Alvaro Lourenço
  • 1,321
  • 1
  • 10
  • 21
  • 2
    This is the correct answer for Rail's asset pipeline. Make sure your CSS file is named `.css.scss` so that the `font-url` helper will function correctly. – scarver2 May 14 '13 at 20:52
  • This is the answer. Like @scarver2 said, `font-url` will only work with SASS or LESS files. See http://stackoverflow.com/a/10907276/165673 for more. – Yarin Nov 04 '13 at 17:09
  • Also make sure the scaffold.css.scss isn't overriding things with its font declarations. – robertwbradford Mar 27 '14 at 18:25
6

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;
}
rachel
  • 377
  • 4
  • 9
  • 1
    In my experience with Rails 4 you could simply use font-url for 'url', but make sure the extension of the file is: .css.scss, otherwise parsing font-url won't work. EDIT: See post below, already explained it. – Loed Jul 25 '13 at 14:43
1

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;
}
Jared
  • 954
  • 7
  • 16
0

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);
Kevin_L22
  • 113
  • 7
0

I'm using 3.1.1 and have my fonts under vendor/assets/store (Spree implementation). The solutions given here did not work for me and I eventually just tried what ended up being my solution - there was no need for

Here's an example of my src attribute for EOT:

src: url('1617A5_4.eot');

I'm a little bit confused by this but it seems like once assets are compiled the assets are all copied in to their parent folder (assets/store/) at which point the stylesheet can just pick them up.

David
  • 167
  • 2
  • 10
  • Use Jared's solution, which also worked for me. I simply forgot the store/ prefix for each font files URL. And use the font-url helper, not fonts-url. – David Dec 06 '11 at 16:03