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:

@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;

Now as you have probably experienced Chrome has problems displaying these fonts in a smooth way.

After some searching I found a solution which seem to work: You simply move this part of the css:

    url('../fonts/Cardo104s-webfont.svg#CardoRegular') format('svg');

So you end up with this:

@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.svg#CardoRegular') format('svg'),
         url('../fonts/Cardo104s-webfont.woff') format('woff'),
         url('../fonts/Cardo104s-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

Now Chrome renders the Fonts in a smooth way, which is great.

BUT:

For some reason this SOMETIMES breaks the Layout. About each third time I load the page I'll get something like this:

Everything is moved to the left. Longer texts are breaking out of their containers. Looks really strange.

**Has anyone experienced this problem before?

I would be happy to get advice on this.**

Feel free to take a look for yourself: View Fireflycovers.com online

Thanks a lot!

Solution 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');

    }
}

Solution 2

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.