grunt - build eot, woff, ttf and svg

Question

I've build my javascript project using grunt. It's working fine for javascript and css files. Please find below one of the classes of my css.

@font-face {
  font-family: 'demo_icons';
  src: url('../font/demo_icons.eot?79280179');
  src: url('../font/demo_icons.eot?79280179#iefix') format('embedded-opentype'),
       url('../font/demo_icons.woff?79280179') format('woff'),
       url('../font/demo_icons.ttf?79280179') format('truetype'),
       url('../font/demo_icons.svg?79280179#demo_icons') format('svg');
  font-weight: normal;
  font-style: normal;
}

I've all these files in font directory. Currently I need to provide this icons in build version. I don't want to use this icon files in my build version. Is there anyway to integrate it in css ???

How do I process eot, woff, ttf and svg in grunt build ???

Answer 1

Convert each file's data to base64 and embed it directly in the CSS via a data uri.

src url('data:[<MIME-type>];base64,<data>')

MIME-type would be image/svg+xml for the SVG font for instance.