使用Rails 3.1 Asset Pipeline在web中存储webfonts

Question

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?

Answer 1

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?

Answer 2

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

Answer 3

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

Answer 4

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