Search code examples
csssvggruntjswebfontsadobe-illustrator

Webfont generated from svg does not look the same

I have a simple svg (drawn by me in illustrator), which I am trying to convert to a webfont (together with other svg's). When I open an svg in an editor I see it correctly (black pawn shakes a hand with a white pawn). The same way if I am converting it to png.

enter image description here

But after I converted it to a webfont with grunt webfont 

   webfont: {
        icons: {
            src     : 'path/svg/*.svg',
            dest    : 'path/fonts',
            destCss : 'path/css',
            options : {
                autoHint: false,
                font    : 'icons',
                hashes  : false
            }
        }
    }

But in the webfont it looks really strange (everything is transparent except of the outline)

enter image description here

Here is an example of my webfont and css generated for it:

@font-face {
    font-family: 'icons';
    url('font/icons.woff') format('woff'),
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icons';
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    font-weight: normal;
    font-style: normal;
    speak: none;
    text-decoration: inherit;
    text-transform: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.icon_draw:before {
    content: '\f103';
}

I have high belief that the problem is with my svg (all other fonts look nice: some of them are mine and some taken from other sources). But I have no idea what is wrong.

P.S. I tried to include all relevant and not relevant details, but if you need something else (or I forgot something else) please let me know.

Solution

  • I am not familiar with grunt-webfont, so the following is just an educated guess.

    SVG defines that the fill property defaults to black. Your black pawn has no defined fill, so it is defaulting to black when rendered in a proper SVG renderer.

    However my guess is that the SVG to webfont converter utility does not appreciate that rule and is only looking at the properties defined on the shape itself. If I am right, explicitly setting the fill to black on the black pawn body shape may fix your problem.

    Also I noticed that the way you have done the arm of the black pawn is a little strange. You have made a piecemeal shape and filled it by drawing a whole lot (25 by my count) of thick short strokes. Font renderers expect glyphs to be defined using closed filled shapes. Not doing it that way may cause problems. Ideally the arm should be a single filled shape. On the other hand, it may work perfectly fine.