CODEWITHSUNDEEP
google-chromelayoutfontssvgfont-face
Arrowcatch
Arrowcatch

Reputation: 1652

Chrome svg-Font-Rendering breaks Layout

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.

Chrome font rendering problems

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:

Chrome Font problems

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!

Upvotes: 29

Views: 21814

Answers (3)

Dan Tello
Dan Tello

Reputation: 1517

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.

Upvotes: 0

Quka
Quka

Reputation: 918

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

    }
}

Upvotes: 78

Khan
Khan

Reputation: 2982

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.

Upvotes: 2

Related Questions