Search code examples
cssgoogle-chromefontsfont-face

Chrome 64bit font face render

I'm having a problem with the new Chrome 64 bit.
It doesn't render the custom fonts in regular, only in bold.

At the top of the image is how it show be. At the bottom is what it's actually rendered.
enter image description here

Here's what i got:

@font-face {
    font-family: 'icons';
    src: url('../fonts/icons.eot');
    src: url('../fonts/icons.eot?#iefix') format('embedded-opentype'), 
         url('../fonts/icons.woff') format('woff'), 
         url('../fonts/icons.ttf') format('truetype'), 
         url('../fonts/icons.svg#untitled_fontregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
.icon {
    font-family: 'icons'; font-style: normal; font-weight: normal;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    position: relative;
    display: inline-block;
}

I've tested it in Firefox, Safari and Opera and it's all good.
Any suggestions...?

Thanks

Solution

  • I've managed a little "hack" that worked.
    I've just added a "translateZ" to the font and now it's fine,

    .icon {
    font-family: 'icons'; font-style: normal; font-weight: normal;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    position: relative;
    display: inline-block;

    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    transform: translateZ(0);
}

    But I still don't know why this is happening.