Is there any way to make icon edges stick to pixels?

[Finesse]

I have an SVG icon which has the size 17x17px and is designed to be pixel-perfect. This is how it looks in an editor:

When I convert the icon to an SVG font and insert it to a HTML page (the icon has CSS style font-size: 17px;), the icon becomes blurred:

It happens both on Windows and macOS. Sometimes the icon is rendered crispy, it depends on amount of text before the inline icon.

Is there any way to make the icon edges be sharp and crispy in the font?

The icon SVG:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="-241 142 17 17"
	 style="enable-background:new -241 142 17 17;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#000;}
</style>
<path class="st0" d="M-235,143v5h-5v-5H-235 M-234,142h-7v7h7V142L-234,142z M-235,153v5h-5v-5H-235 M-234,152h-7v7h7V152L-234,152z
	 M-225,143v5h-5v-5H-225 M-224,142h-7v7h7V142L-224,142z M-225,153v5h-5v-5H-225 M-224,152h-7v7h7V152L-224,152z"/>
</svg>

[NaridaL]

how are you inserting in into the HTML?

[Finesse]

@NaridaL First I make a font file using svgicons2svgfont.

Then I add a font-face rule to a CSS file:

@font-face {
    font-family: 'icons';
    src: url("../fonts/icons.svg") format('svg');
    font-weight: normal;
    font-style: normal;
}

Then describe the icons in the CSS file:

.icon {
    line-height: 1;
}
.icon:before {
    font-family: 'icons';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-decoration: none;
    text-transform: none;
    display: inline-block;
    vertical-align: bottom;
}
.icon__4squares:before {
    content: "\E001"
}

And add an icon to a HTML code:

<i class="icon icon__4squares"></i>

[NaridaL]

This seems related: https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/SVG_hinting#Pixel_snapping
In any case, I don't think there's anything we can do on this end currently. Did you try disabling the font-smoothing/antialiasing? That seems to be the culprit. Also investigate if you can use CSS to align the icon container to a pixel border.

[Finesse]

@NaridaL

This seems related: https://www.w3.org/Graphics/SVG/WG/wiki/Proposals/SVG_hinting#Pixel_snapping

Looks interesting. Hope it will be implemented.

Did you try disabling the font-smoothing/antialiasing?

Yes. The icon becomes even more blurry:

Also investigate if you can use CSS to align the icon container to a pixel border.

This is not possible in my case. I have the icon in the text block aligned to center, and the text block has arbitrary width and content.

[nfroidure]

Ensure you set up a sufficient font height, it often cause issues ti be under 1000.

Otherwise, try to use TTFAutoHint: https://www.npmjs.com/package/gulp-iconfont#optionsautohint

[Finesse]

@nfroidure

Ensure you set up a sufficient font height, it often cause issues ti be under 1000.

I use fontHeight equals 1024.

Otherwise, try to use TTFAutoHint: https://www.npmjs.com/package/gulp-iconfont#optionsautohint

I actually use gulp-iconfont to convert the icons to a font. TTFAutoHint affects nothing on macOS and totally breaks the icons on Windows:

(it is the same icon as I showed before)