Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.

like image 567
lyuba Avatar asked Oct 08 '11 20:10

lyuba


2 Answers

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;
}
like image 178
Aaron Gibralter Avatar answered Sep 23 '22 11:09

Aaron Gibralter


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.

like image 25
Michael Gall Avatar answered Sep 21 '22 11:09

Michael Gall