Issue with custom icon font rendering differently in different browsers

Question

Having issues with a custom icon font. It renders differently between Safari and Chrome. It appears to be between 1-2 pixels lower in Safari. Can I somehow have it render the same in both browsers?

Created the icon font by exporting 16 x 16 px SVG from Sketch and then imported them into IcoMoon and put the optimize metrics to 16 automatic.

Grid on IcoMoon

Chrome OS X

Safari OS X

Live example: http://jsfiddle.net/QQ7mV/

HTML:

<a href="" class="button increase">&#x2b;</a>

CSS:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
@font-face {
    font-family: "icons";
    src: url("http://cl.ly/Qo0T/icons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
a {
    display: block;
    text-decoration: none;
    outline: none;
}
.button {
    width: 115px;
    height: 37px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    margin: 0 auto 20px auto;
    background-color: #edeef0;
    background-repeat: no-repeat;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    transition-property: background-color, opacity;
    -webkit-transition-property: background-color, opacity;
    -moz-transition-property: background-color, opacity;
    -o-transition-property: background-color, opacity;
    -ms-transition-property: background-color, opacity;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}
.button.increase, .button.decrease {
    display: inline-block;
    vertical-align: top;
    width: 23px;
    height: 23px;
    font-family: "icons";
    font-size: 8px;
    font-weight: normal;
    line-height: 1;
    padding: 8px 0 0 0;
    -webkit-font-smoothing: antialiased;
}
.button.increase {
    margin: 13px 5px 0 11px;
}
.button.decrease {
    margin: 13px 0 0 0;
}

Answer 1

So I found the problem myself. There might be a better solution but this one solved it for me. Feel free to still reply with your solution.

http://icomoon.io/#docs/font-face

A Crisp Size is listed for each of the icon sets in IcoMoon's library tab. To get the best results, you should use this size when using your font. For example, if an icon set is optimized for (16 × N)px sizes, you will get crisp results by setting your font-size to 16px, 32px, 48px (= 3 × 16px), etc.

Basically you want to avoid importing a different size SVG than you'll be using in CSS. For example if you import 16x16px SVG icons to IcoMoon and then use 8px font-size on them, they'll render poorly. Instead import 8x8px SVG icons and they'll render the same in both Chrome and Safari.

When I'm saying rendering I'm refering to vertical alignment of icon fonts.

Live example: http://jsfiddle.net/QQ7mV/3/

HTML:

<a href="" class="button increase">&#x2b;</a>

CSS:

* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
}
@font-face {
    font-family: "icons";
    src: url("http://cl.ly/QnNX/icons.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}
a {
    display: block;
    text-decoration: none;
    outline: none;
}
.button {
    width: 115px;
    height: 37px;
    color: #333333;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 35px;
    margin: 0 auto 20px auto;
    background-color: #edeef0;
    background-repeat: no-repeat;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -ms-border-radius: 4px;
    transition-property: background-color, opacity;
    -webkit-transition-property: background-color, opacity;
    -moz-transition-property: background-color, opacity;
    -o-transition-property: background-color, opacity;
    -ms-transition-property: background-color, opacity;
    transition-duration: 0.2s;
    -webkit-transition-duration: 0.2s;
    -moz-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    -ms-transition-duration: 0.2s;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -webkit-user-drag: none;
}
.button.increase, .button.decrease {
    display: inline-block;
    vertical-align: top;
    width: 23px;
    height: 23px;
    font-family: "icons";
    font-size: 8px;
    font-weight: normal;
    line-height: 1;
    padding: 7px 0 0 0;
    -webkit-font-smoothing: antialiased;
}
.button.increase {
    margin: 13px 5px 0 11px;
}
.button.decrease {
    margin: 13px 0 0 0;
}