Asset pipeline, compass font-face and eot?iefix call to the font

Question

I am trying to use a Compass font-face mixin, which contains the inclusion of
*.eot?iefix

My app/assets/fonts contains all the font types needed, including .eot.

When I try to run assets:precompile the task fails saying something like: webfont.eot?iefix isn't precompiled

Do you know the possible solution for this problem?

It runs with no error in case I have config.assets.compile = true, but as I've understood it's better not to use it on production.

score 10 · Answer 1 · answered Nov 23 '11 at 14:58

10

You can do it with pure Scss too:

@font-face {
  font-family: 'DroidSans';
  src: url(font-path('DroidSans-webfont.eot'));
  src: url(font-path('DroidSans-webfont.eot') + '?#iefix') format('embedded-opentype'),
       url(font-path('DroidSans-webfont.woff')) format('woff'),
       url(font-path('DroidSans-webfont.ttf')) format('truetype'),
       url(font-path('DroidSans-webfont.svg') + '#DroidSansRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

answered Nov 23 '11 at 14:58

Aaron Gibralter

4,773
3
35
50

instead of `url(font-path())`, we can use `font-url()` – Dzung Nguyen May 08 '13 at 07:23
1

I believe you can now. At the time there was a conflict between Sass helpers and Rails helpers. – Aaron Gibralter May 08 '13 at 13:51

score 4 · Answer 2 · answered Oct 12 '11 at 13:04

4

I've just solved this problem with a little (supported) hack.

I've created a new css file font.css.erb and place @import "font" in the place of the @font-face declaration.

@font-face {
    font-family: 'SketchBlockBold';
    src: font_url('font/sketch_block-webfont.eot');
    src: url('<%= asset_path('font/sketch_block-webfont.eot')+"?#iefix" %>') format('embedded-opentype'),
         font_url('font/sketch_block-webfont.woff') format('woff'),
         font_url('font/sketch_block-webfont.ttf') format('truetype'),
         url('<%= asset_path('font/sketch_block-webfont.svg')+"#SketchBlockBold" %>') format('svg');
    font-weight: normal;
    font-style: normal;
}

Note the use of the asset path, and the concatenation of the special file endings.

answered Oct 12 '11 at 13:04

Michael Gall

183
7

why did you use both the `font-url` and `url` declarations? whats the difference? – pruett Nov 01 '11 at 23:01
It's because url() isn't a asset pipeline function but font_url() is. In this case I'm basically replacing the font_url() magic with the stuff in erb – Michael Gall Nov 08 '11 at 06:02
Thanks for the suggestion! Code works perfectly fine locally, but `rake assets:precompile` falls back to the same error: `fontname.eot isn't precompiled` What could be a problem, how do you think? – lyuba Dec 05 '11 at 15:05

score 1 · Answer 3 · answered Oct 10 '11 at 11:37

1

Seems to be a known issue https://github.com/rails/rails/issues/3045 Using config.assets.compile = true for now.

answered Oct 10 '11 at 11:37

lyuba

6,250
7
27
37

Asset pipeline, compass font-face and eot?iefix call to the font

3 Answers3

Linked