Last Updated: February 25, 2016
·
2.532K
· cemre

Razor sharp icon fonts

Made icon fonts, but they look blurry, even at the original size you made them? Make sure you're prioritizing an SVG version of the font.

Follow these steps:
* Design 16x16 SVG glyphs with Illustrator using “align to pixel grid”
* Import them into the icomoon icon generator to generate a font
* (Here’s the secret) Flip the preferred order of formats in the font-face syntax outputted by font-squirrel, placing SVG above TTF.

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

Picture

1 Response
Add your response

Great discovery, this has helped a lot Cemre, thanks

over 1 year ago ·