Geek Answers Handbook

Storing webfonts in gem using Rails 3.1 Asset Pipeline

I am trying to use the Rails 3.1 Asset Pipeline to store some fonts that I use for several applications. I tried almost any combination of storage location, but I can't get the pipeline to actually pick up my font files. They will appear in public/assets when I run rake assets:precompile , but they are not accessible from any << 22> helpers, and I could not understand 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; }

The output is ls app/assets/images (stuck in images , since assets/fonts did not work, but had the same lack of work 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 tried to access:

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

He doesn't pick it up anywhere. Any thoughts?

+4
source share
4 answers

Do you explicitly declare font files to be precompiled?

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

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

Is the stylesheet loading the font rule @?

+6
source

You must say that property_path you are "assimilating" the font, which will fix your directory problem:

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

If this does not work, which browser is output from application.css (I assume it includes fonts.css)?

0
source

The docs say:

Asset Management Assistants . When using the asset pipeline, you must rewrite the paths to the assets. When referencing assets, use the following asset helpers (underlined in Ruby, hyphens 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, style sheet. For example: image-url ("rails.png") becomes url (/assets/rails.png), and the image path ("rails.png") becomes "/assets/rails.png".

Example:

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

But I could not do this for my rails3.1 application. I had to put the fonts directly in the shared folder:

 /public/HelveticaInseratCom.ttf

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

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

Then it worked, and when rake assets:precompile started rake assets:precompile worked without throwing this error:

 rake aborted! HelveticaInseratCom.ttf isn't precompiled
0
source

If you insert fonts into your resource / image directory and then use rake assets:precompile , rails will automatically compile everything in your image directory.

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

If *.css.scss :

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

Note: you can use font-url (link rail guides )

Gotcha # 1: add your css files that 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 a digest to make it work:

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

More articles:


All Articles