These screenshots are both taken from the same source code:
You can probably guess it, these are rendered with the latest Google Chrome (43) on Linux. As you can see, the result varies greatly, and I have no idea why.
The only thing I did was open the page in a new tab, and somehow I get on of those results randomly (usually one of the first 2 screenshots)
The relevant parts of the code, i.e. everything that touches the font -family
, -style
or -weight
:
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300italic,600);
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
font-style: normal;
font-weight: 300;
}
h1, h2, h3 {
font-weight: 600;
}
.timetable .organisation {
font-style: italic;
}
.timetable .title {
font-weight: 600;
}
You can see it for yourself there (the code is live, I don't care about that bug enough to make a dev copy)
As far as I can tell, the first screenshot show the correct font rendering (where it's thinner), the other one being sans-serif
, which is next in the font-family
list.
Google Fonts seems to be serving the font in WOFF2
format (checked by opening the imported CSS directly in a tab).
I have no idea how to check the font format actually loaded in the page.
I have tried everything remotely related:
- changing the order of the CSS and JS inclusion
- adding an opacity animation (even though that bug should be fixed)
- adding some font-smoothing
This "related questions" are not related:
- Chrome not respecting font weight? → The
font-weight
does exist in this font. - Inconsistent font size rendering issue on Chrome → The
font-size
is set inpx
. - Chrome is not displaying google fonts when all other browsers do → The
font-style
is correct. - Chrome not loading website when Google Fonts are installed/running → The page doesn't freeze.
- Google I/O - Roboto Font (new version) font rendering issues in Chrome (windows) → I'm not on Windows.
- Google Chrome Font Rendering → I'm not on Mac OS.
- Chrome on Mac rendering font sizes inconsistently → I don't have any accessibility settings set and my "minimum font size" is set to 10, i.e. much below the sizes used here.
- Font family automatically changes to “undefined,sans-serif!important” in Chrome → disabling all the extensions changes nothing
It might be related to this unanswered question, although my experience differs, as the results change randomly here.