I love icon fonts. In an ideal word I would use SVG, but the reality is that I, like many developers, still need to support Internet Explorer 8. So, my relationship with icon fonts is here to stay for the time being.

Recently I moved statesupply.com’s icon font from the old version of IcoMoon’s font generator to the current version. I took the opportunity to feed my compulsive nature and perfect my icon font’s vertical alignment with our web font. Since every web font is unique this can turn in to quite the rabbit hole.

I went through several iterations of the font, adjusting the baseline and making several sizing tweaks on individual icons until the set was perfect. …Perfect until I loaded up the icon font in Chrome. Ensue frustration.

After a couple hours of tweaking I thought everything was perfect, but several of the icons were cut off at the bottom. The most frustrating part was that be it not for the cutoff, the icons looked perfect! So, I pursued a heavy combination of CSS tweaks and searches on Uncle Google. Everything I tried came up empty. Then it dawned me — SVG. S-V-friggen-G.

My @font-face originally looked like this:

// IcoMoon Icon Font
// -----------------
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.svg#icomoon') format('svg'),
        url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Image of buttons with icons that are cut off on the bottom
SVG Icon Font

Changing the order of the font sources so that the woff file loads instead of the svg file solved the problem.

// IcoMoon Icon Font
// -----------------
@font-face {
    font-family: 'icomoon';
    src:url('fonts/icomoon.eot');
    src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
        /*
            The SVG font has rendering problems in Chrome on Windows.
            To fix this, I have moved the SVG font above the woff font
            so that the woff file gets downloaded.
        */
        url('fonts/icomoon.svg#icomoon') format('svg'),
        url('fonts/icomoon.woff') format('woff'),
        url('fonts/icomoon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
Image of buttons with icons
WOFF Icon Font

Ensue pixel-perfection bliss.

Posted by: John Dugan

Comments