SVG icon looks different after being converted to woff

Question

I am using gulp-iconfont to convert a set of svg icons to a woff font.

Before the icon is converted into the font it looks as follows:

How it appears in the woff file:

My gulp task is as follows:

gulp.task('icon-font', function() {
  gulp.src([paths.icons + '*.svg'])
    .pipe(iconfont({
      fontName: 'icons',
      formats: ['woff'],
      timestamp: timestamp,
      appendUnicode: true
    }))
    .on('glyphs', function(glyphs, options) {
      gulp.src(paths.templates + '/_icons.scss')
        .pipe(template({ glyphs: glyphs, timestamp: timestamp }))
        .pipe(gulp.dest(paths.styles));
    })
    .pipe(gulp.dest(paths.fonts + 'icons/')
  );
});

My Illustrator export settings:

SVG code:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="-183 185 32 32" style="enable-background:new -183 185 32 32;" xml:space="preserve">
<g>
    <path d="M-175.6,190.5c-0.3-0.3-0.9-0.3-1.3,0c-4.7,4.7-4.7,12.4,0,17.1c0.2,0.2,0.5,0.5,0.7,0.7c0,0.1-0.1,0.2-0.1,0.3v6.7h-2.9
        c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.6c0.5,0,0.9-0.4,0.9-0.9c0-0.5-0.4-0.9-0.9-0.9h-2.9v-5.7c1.8,1.1,3.9,1.6,6.1,1.6
        c3.2,0,6.3-1.3,8.5-3.5c0.2-0.2,0.3-0.4,0.3-0.6c0-0.2-0.1-0.5-0.3-0.6L-175.6,190.5z M-168.3,209.3c-2.7,0-5.3-1.1-7.3-3
        c-3.8-3.8-4-9.8-0.6-13.9l14.5,14.5C-163.5,208.5-165.9,209.3-168.3,209.3z"/>
    <path d="M-168,192.8c3.6,0,6.6,3,6.6,6.6c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9c0-4.6-3.8-8.4-8.4-8.4
        c-0.5,0-0.9,0.4-0.9,0.9C-168.9,192.4-168.5,192.8-168,192.8z"/>
    <path d="M-157.8,189.1c-2.7-2.7-6.2-4.1-10-4.1c-0.5,0-0.9,0.4-0.9,0.9c0,0.5,0.4,0.9,0.9,0.9c3.3,0,6.4,1.3,8.7,3.6
        c2.3,2.3,3.6,5.4,3.6,8.7c0,0.5,0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9C-153.6,195.3-155.1,191.8-157.8,189.1z"/>
</g>
</svg>

Any ideas are appreciated.

Update:

Following some advice in @nfroidure I made them all 300px x 300px and now I am getting this and added the following options fontHeight: 16 and normalize: true. Which is producing the following:

Your SVG looks fine. Perhaps gulp has an issue with the way it interprets come paths. You might want to try posting this as a bug in the gulp repo. Or maybe try using grunt instead. — Paul LeBeau, Jan 08 '16 at 08:12
The issues was realated to the process of converting this svg to a woff font. Why should I not be using woff? It has excellent support in the browsers I am targeting. — nickspiel, Feb 16 '16 at 23:25

nfroidure · Accepted Answer · 2016-01-14T11:19:31.733

5

Your SVGs seems too small. Try to increase their size or use the fontHeight (> 1000) + normalize options to strech them up.

edited Jan 14 '16 at 11:19

answered Jan 12 '16 at 06:14

nfroidure

1,531
12
20

What setting / dimensions would be optimal? – nickspiel Jan 12 '16 at 06:26
I tried adding `fontHeight: 16` and `normalize: true` and the icons still look odd. Should I change the size of source SVGs? If so what would be the best width / height to use? – nickspiel Jan 12 '16 at 06:56
I made them all 300px x 300px and now it is even worse (see edit for image) – nickspiel Jan 12 '16 at 23:09
Okay, I did cleared my node-modules folder, did a fresh npm install, resized all the icons to 300 x 300, added the `fontHeight: 16;` and all seems to be good now. Looks like it may have been a combination of things. – nickspiel Jan 13 '16 at 00:12
That appears to have done the trick! If you update the answer to include this I will mark it as correct. Thanks for your help and the plugin! – nickspiel Jan 13 '16 at 20:48

SVG icon looks different after being converted to woff

1 Answers1