从svg生成的Webfont看起来不一样

我有一个简单的svg(由插图画家绘制),我试图转换为webfont(与其他svg一起).当我在编辑器中打开svg时,我看到它是正确的(黑色棋子用白色棋子握手).如果我将它转换为png,也是一样的.

但在我用grunt webfont将其转换为webfont 之后

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

但是在webfont中它看起来很奇怪(除了轮廓之外一切都是透明的)

这是我为其生成的webfont和css 的示例:

@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';
}

我非常相信问题出在我的svg上(所有其他字体看起来都不错:其中一些是我的,有些是从其他来源获取的).但我不知道出了什么问题.

PS我试图包括所有相关和不相关的细节,但如果你需要别的东西(或我忘了别的东西),请告诉我.