Chrome svg-Font-Rendering breaks Layout

Question

I\'m currently working on a little Project in which I\'d like to use webfonts via @fontface.

I implemented the font\'s like this:

@f         


        

Answer 1

I have had this exact issue happen to a website of my own.

Instead of putting the svg at the top, keep the original formatting but add a media query as shown below. This will make chrome render the fonts perfectly and fixes the layout breaking.

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'CardoRegular';
        src: url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

    }
}

Answer 2

The fix is in the duplication of the @font-face rule.

You don't necessarily need it in a media query in the Quka's answer, though that's a nice way to only target webkit browsers.

If you duplicate your @font-face declaration exactly as (svg first for better rendering), and paste it below the original, the funky layout/draw issues are gone.

Just calling out that the media query isn't important here—it's the duplicated rule. This is such a weird bug. So dumb.

Answer 3

I have seen the same issues (or worse) across a few sites. Most of the time the text is smashed together on top of itself.

My only solution at the point is to go back to the older font. You can also try to add the CSS rule: -webkit-font-smoothing: antialiased; for a small improvement.