Usando @font-face con la aplicación Rails 3.1?

Sé que esta es una pregunta antigua, pero me encontré con este problema con rails 3.2, y después de leer el enlace a la documentación publicada anteriormente, no hubo necesidad de editar la aplicación.rb. Todo lo que necesitaba hacer era hacer lo siguiente en mi hoja de estilos (usando 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')
}

Así que en lugar de usar url, usé el asset-url genérico, que toma 2 argumentos, el archivo y la clase asset, en este caso 'font'.

Desde Rails 3.1 y superiores puedes llamar a font-url directamente. Así:

@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;
}

Espere que su css final se vea así:

@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;
}

Normalmente funciona:)

Usando Rails 4.0 (no sé si esto es específico de 4, pero de todos modos), solo pude hacerlo funcionar con url(font_path('font-name.ttf')). Tampoco era necesario agregar la ruta de fuentes a la ruta de recursos (config.assets.paths << "#{Rails.root}/app/assets/fonts").

Así que, para mí esto es lo que funcionó:

@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;
}

Acabo de actualizar ese artículo en Atomic Object's Spin blog. Aquí está el CSS convertido (Estabas mirando la sintaxis Sass)

@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;
}

Estoy usando 3.1.1 y tengo mis fuentes bajo vendor/assets/store (implementación de Spree). Las soluciones dadas aquí no funcionaron para mí y finalmente solo intenté lo que terminó siendo mi solución - no había necesidad de

Aquí hay un ejemplo de mi atributo src para EOT:

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

Estoy un poco confundido por esto, pero parece que una vez que se compilan los activos, todos los activos se copian en su carpeta principal (assets / store/), momento en el que la hoja de estilos puede seleccionarlos hasta.

Si bien esto es tarde, podría usar la mezcla de Compass +font-face para evitar todos estos problemas. El mixin ayuda a su vida más fácil por

1. No recuerdo las terribles advertencias de la decleración tradicional de la fuente-cara

2. Maneja internamente las declaraciones url_helper y format para usted

3. Es mucho más fácil recordar

Se declara de la siguiente manera, señoras y señores:

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