29

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!

Arrowcatch
  • 1,612
  • 3
  • 19
  • 26
  • I like your dog and media query ascii art – Chris Curtis Aug 30 '13 at 00:55
  • I'm getting this problem as well on Chrome + Windows 8. The reason things are shifting is that all of the width calculations for layout appear to be off, making containers far smaller than they should be. – Boushley Dec 03 '13 at 16:17

3 Answers3

78

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

    }
}
Quka
  • 918
  • 7
  • 15
  • 7
    This needs a lot more attention! Seems to be working well for me so far. – Toddish Jan 19 '13 at 23:18
  • 1
    How/why would this make any difference at all? – Pointy Jan 20 '13 at 14:56
  • This works well. @Pointy, the last supported format in the source order gets used, so the SVG will override the WOFF any way. I think it may be a typo in the original excerpt. – chrisfrancis27 Sep 26 '13 at 14:14
  • @Jitendra this fix is specifically for Webkit browsers, not Windows Mobile. – chrisfrancis27 Sep 26 '13 at 14:14
  • @ChrisFrancis I suspect that it also results in the WOFF file being downloaded even though it's not used, which is undesirable. – Pointy Sep 26 '13 at 14:17
  • @Pointy yes, I'm pretty sure you're right about that. It's a trade-off between visible smoothness and performance, at least until Webkit/Blink can render TrueType fonts with full anti-aliasing. – chrisfrancis27 Sep 26 '13 at 14:20
  • For some reason chrome wasn't rendering a svg with # appended in my case, after removing the hashtag part, it started working :) my .02 – Kaan Soral Sep 29 '13 at 01:52
  • 1
    @Quka, you are the MAN! This was a very weird problem for me since it wasn't even present all the time, just pops up some every 200th time I refresh but it wouldn't go away until I clear both cache and history. This fixes it permanently, great thinking (don't care it pulls the woff file as well, it's worth it). – Vexter Dec 03 '13 at 08:59
  • @ChrisFrancis The src list for a font-face declaration isn't the last valid font, it's the first valid font. From the spec: "When a font is needed the user agent iterates over the set of references listed, using the first one it can successfully activate." http://dev.w3.org/csswg/css-fonts/#descdef-src – Boushley Dec 26 '13 at 16:16
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.

Khan
  • 2,912
  • 3
  • 21
  • 21
0

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.

Community
  • 1
  • 1
Dan Tello
  • 1,517
  • 1
  • 10
  • 10