I'm loading Roboto from Google fonts like this:
<link href="//fonts.googleapis.com/css?family=Roboto:300,400,400i,500" rel="stylesheet" type="text/css">
I've set some text to font-weight: 400 and some to font-weight: 500 in the same line.
The problem is that the 400 text renders a shorter letter height than the 500 text. This only happens for even font sizes 12px, 14px & 16px.
The issue does not happen when I do the same thing on the Google fonts website.
Is this an issue with the font design or an issue with how I am loading/using the web font?
15px local:
16px local:
16px Google fonts:
Do you have a local version of Roboto installed? Google with attempt to load a local version of the font before they fetch their own. So if you have Roboto installed on your computer, the mismatch in x-height might be caused because you're mixing the installable "desktop font" for weight 400, and a downloaded webfont for weight 500. (Or the other way around.)