Google font letter height does not match
I'm having a weird issue in Chrome where Google font shows inconsistent letter heights. It happens when I use text-transform: uppercase
and it gets fixed if I use font-weight:bold
. I have a sample code where you can see what is S
too high in a 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 you change the font to arial
, it will be fixed. Is there any CSS property I need to reset in order for the font to display correctly?
source to share
This is a well known bug in Chrome on Windows. Chrome has made a political / ecosystem transition to reduce reliance on other companies and other technologies, such as the fork of Blink from the Web-Kit. Chrome also decided to ditch Microsoft's font rendering. The result is poor subpixel rendering. You noticed that after you sketch out your font size by size or weight, the problem is solved because the character strokes are wider than one pixel.
One solution for you: you can go into Chrome flags: // enable Direct Write.
But it certainly doesn't help your users. There are several hacks.
One hack is to change your font stack so that SVG is called specifically for web typing.
You can do it 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 problems with this. This is not the future. It's a hack. But it works for now and Chrome will be fixing it in the near future. Other hacks involve calling SVG first on your stack, but this has less reliable results.
source to share
I had the same problems with Windows browsers and first tried using SVG on the stack, but that didn't work - I later found out that Chrome has kept support for SVG fonts since then. So I tried using the TTF version of my font pushed onto the stack first and for some reason it resolved the problem. Tested on Chrome, Firefox and Edge. Oddly enough, if I reference the TTF in the data URI, it falls back to inconsistent letter heights again.
source to share