Storing webfonts in a gem using the Rails 3.1 Asset Pipeline

I'm trying to use the Rails 3.1 Asset Pipeline to store some fonts that I'm using across multiple applications.开发者_运维百科 I've tried just about every combination of storage location but I can't seem to get the pipeline to actually pick up my font files. They will show up in public/assets when I run rake assets:precompile but they aren't available from any asset_path helpers and I haven't been able to figure out why.

Example from fonts.css.erb:

@font-face {
    font-family: 'MuseoSans';
    src: url('<%= asset_path('museosans_500_italic_webfont.eot') %>');
    src: url('<%= asset_path('museosans_500_italic_webfont.eot?#iefix') %>') format('eot'),
         url('<%= asset_path('museosans_500_italic_webfont.woff') %>') format('woff'),
         url('<%= asset_path('museosans_500_italic_webfont.ttf') %>') format('truetype'),
         url('<%= asset_path('museosans_500_italic_webfont.svg#webfontcWw5DXpH') %>') format('svg');
    font-weight: normal;
    font-style: italic;

 }

Output of ls app/assets/images (stuck it in images since assets/fonts wasn't working, but had the same lack of working both times):

museosans_100_italic_webfont.eot  museosans_500_webfont.eot
museosans_100_italic_webfont.svg  museosans_500_webfont.svg
museosans_100_italic_webfont.ttf  museosans_500_webfont.ttf
museosans_100_italic_webfont.woff museosans_500_webfont.woff
museosans_100_webfont.eot         museosans_700_italic_webfont.eot
museosans_100_webfont.svg         museosans_700_italic_webfont.svg
museosans_100_webfont.ttf         museosans_700_italic_webfont.ttf
museosans_100_webfont.woff        museosans_700_italic_webfont.woff
museosans_300_italic_webfont.eot  museosans_700_webfont.eot
museosans_300_italic_webfont.svg  museosans_700_webfont.svg
museosans_300_italic_webfont.ttf  museosans_700_webfont.ttf
museosans_300_italic_webfont.woff museosans_700_webfont.woff
museosans_300_webfont.eot         museosans_900_italic_webfont.eot
museosans_300_webfont.svg         museosans_900_italic_webfont.svg
museosans_300_webfont.ttf         museosans_900_italic_webfont.ttf
museosans_300_webfont.woff        museosans_900_italic_webfont.woff
museosans_500_italic_webfont.eot  museosans_900_webfont.eot
museosans_500_italic_webfont.svg  museosans_900_webfont.svg
museosans_500_italic_webfont.ttf  museosans_900_webfont.ttf
museosans_500_italic_webfont.woff museosans_900_webfont.woff

I've tried accessing from:

• /assets/museosans_500_italic_webfont.svg
• /assets/images/museosans_500_italic_webfont.svg
• /images/museosans_500_italic_webfont.svg

It's not picking it up anywhere. Any thoughts?

Are you explicitly declaring font files should be precompiled?

config.assets.precompile += %w( .js .css *.css.scss .svg .eot .woff .ttf)

Is this a problem in development, staging, production, all of the above?

Is the stylesheet with the @font-face rule loading?

The docs say:

Asset Helpers. When using the asset pipeline, paths to assets must be rewritten. When referencing assets use the following asset helpers (underscored in Ruby, hyphenated in Sass):

◦   asset_path($relative-asset-path, $asset-class) - Returns a string to the asset. For example: asset-path("rails.png", image) becomes "/assets/rails.png"
◦   asset_url($relative-asset-path, $asset-class) - Returns url reference to the asset.

For example: asset-url("rails.png", image) becomes url(/assets/rails.png)

As a convenience, for each of the following asset classes there are corresponding -path and -url helpers: image, font, video, audio, javascript, stylesheet. For example: image-url("rails.png") becomes url(/assets/rails.png) and image-path("rails.png") becomes "/assets/rails.png".

Example:

@font-face
  font-family: HelveticaInseratCom
  src: font-url('HelveticaInseratCom.ttf')

But, i could not do it like that for my rails3.1 app. I had to put the fonts directly in the public folder:

/public/HelveticaInseratCom.ttf

And in the css.scss.erb file i used:

@font-face
  font-family: HelveticaInseratCom
  src: url('/HelveticaInseratCom.ttf')    

This then worked and when running rake assets:precompile worked without throwing this error:

rake aborted!
HelveticaInseratCom.ttf isn't precompiled

If you stick the fonts in your assets/images directory, and then use rake assets:precompile, rails automatically compiles everything in your images directory.

so all you have to do is make the correct call in your css:

If *.css.scss:

font-url('museosans_500_italic_webfont.eot') format('eot')

Note: you can use font-url (reference rails guides)

Gotcha #1: add your css files you want to serve (only the ones you actually call in stylesheet_link_tag) config.assets.precompile += %w( application.css.scss application.js.coffee ect.css.sass)

Gotcha #2: you need to specify digest to get it to work:

# Generate digests for assets URLs
config.assets.digest = true

You should tell asset_path you're 'assetising' a font, that will fix your directory problem:

url('<%= asset_path('museosans_500_italic_webfont.eot', font) %>');

If that doesn't work, what is the browser output from application.css (I assume that includes fonts.css)?