Chrome svg-Font-Rendering breaks Layout

font-face, fonts, google-chrome, layout, svg

Solution

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

    }
}

Problem

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!

Original source