Google Font Letter Height Not Consistent

Question

I am having a weird issue in Chrome where a Google Font is showing inconsistent letter heights. It only happens when I use text-transform: uppercase and it is fixed if I use font-weight:bold. I have some example code, where you can see the S is too tall in the word TESTING:

body {
    font-family: 'Exo 2' !important;
    line-height:1.42857143;
}
div {
    width:40px;
}
span.upper {
    display:block;
    margin-top:20px;
    font-size:18px;
    text-transform:uppercase;
}
span {text-transform:uppercase; }

<link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css">
    <div>
        Broken:<br>
        <a href="#">
            <span class="upper">Testing 123</span> </a>
        
        <br>Normal:<br><br>
        <span>Testing 123</span>
        
    </div>

If I change the font to arial, it's fixed. Is there some CSS property I need to reset so that the font will render correctly?

Answer 1

This is a well known bug in Chrome on Windows. Chrome has made the political/ecosystem move to reduce dependencies on other companies and other established tech, like the move to fork Blink from Web-Kit. Chrome has also decided to ditch Microsoft font rendering. The result is poor sub-pixel rendering. You've noticed that once you bump your font up in size or weight the issue is resolved because the character strokes are wider than one pixel.

One solution for you: you can go into Chrome's flags:// to enable Direct Write.

But that doesn't help your users, of course. There are a few hacks.

One hack is to change up your font stack, so that SVG is called specifically for web-kit.

You can do this with a media query hack:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'chunk-webfont';
        src: url('webfont.svg') format('svg');
    }
}

So there are issues with this. It's not future-proof. It's a hack. But it works for now, and Chrome will be fixing this in the near future. Other, hacks include calling SVG first in your stack, but it has less reliable results.