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

  • Kevin Good

    svg as img src is better on chrome, the 2nd version is far from pixel-perfect…

  • Indeed. Still doesn’t provide a solution for ie8 though.

  • Jeremie

    I got exactly the same problem with an icomoon font. Rendering in chrome cropped some icons. I really spent a lot of time on this, tried everything I found on the web (including changing the order of svg and woff in the font-face CSS definition), but without any result, in my case.

    I noticed a strange behaviour : my icon font was cropped only until a font-size of 256px… after that, the rendering was ok.

    I finally got the solution from the icomoon support (within 5 minutes ! they rock !). Here’s their answer :

    “It’s a Chrome font rendering bug. Try changing the Em Square Height of the font before downloading it. You can find this option in the font tab > Preferences > Font Metrics. Change it to 1024.”

    Easy for icomoon users !
    In case you use other font apps, check if you can modify this ‘Em Square Height’ parameter for you font before downloading it.

    This solved the problem for me !

  • Jeremie – Thank you for dropping that golden nugget! 🙂

  • +1! This just solved my problem.

  • Pete Droll

    Thanks for sharing Jeremie. I had that exact problem. It looks like IcoMoon have updated so the Em Square Height is defaulted to 1024 now, so hopefully this won’t be an issue moving forward.

  • Larry Botha

    Saviour ^
    Right here ^

  • Armen Haroyan

    Great post, saved ALOT of time, especially Jeremie’s post !!!