Why is Chrome on Linux displaying the wrong font weight?

Question

My website has the following base font:

body {
  font:300 16px/1.5 Ubuntu,sans-serif;
  ...
}

The font is loaded via Google Fonts:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:300,300i,700,700i&amp;subset=greek,greek-ext">

All is expected font-wise in most browsers. However, on Chrome on Linux, I'm seeing the base font displayed with what appears to be font weight 500 instead of 300. The screenshot shows what I'm talking about. The normal text is too heavy. The italic text is displayed at the correct weight (and created using unstyled <em> tags). It also shows that Chrome understands that it's supposed to be using 300 weight.

This issue doesn't appear in Chrome on Windows or MacOS--only Linux. In addition, I've seen it in an old version of Chrome (48.0.2564.116) as well as a current Chromium (70.0.3538.67). I have no issues with Firefox, Edge, or Opera on any OS I've tested. My Linux machine is running Ubuntu 16.04. In addition, Chrome renders the Ubuntu font correctly at all weights on fonts.google.com.

Any ideas what may be going on?

Answer 1

This is due to a bug in Linux (possibly just Ubuntu).

How I solved it: The Googlefonts url fetches a plain text of css font-face rules (you can see that if you just call it from the browser). They contain the srcs where to look for the fonts in prioritized order. Googlefonts looks for local fonts first and then if they don't exist fetches them from their remote locations:

@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 300;
  src: local('Ubuntu Light'), local('Ubuntu-Light'), url(https://fonts.gstatic.com/s/ubuntu/v13/4iCv6KVjbNBYlgoC1CzjsGyN.woff2) format('woff2');
  unicode-range: U+0000-00FF, ...
}

This is generally a good idea because fetching fonts that are already installed on the system is unnecessary and slows down page loading. However, there is a known bug in Ubuntu that causes the wrong installed fonts to be loaded: https://bugs.launchpad.net/ubuntu/+source/fonts-ubuntu/+bug/1512111 The font names on Googlefonts are actually correct, but for some reason the OS does not process them correctly. So, there is no way for Google to fix that on their side.

My solution is to just remove the local srcs in order to immediately fetch the fonts from remote. (I actually wonder why Google doesn't offer a "skip local fonts" option by default, maybe they don't want to waste their resources.) In that case it probably doesn't even matter performance wise because all other systems besides Ubuntu don't have this as a local font anyways.

Here's how I skip local fonts using Javascript:

fetch('https://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700')
  // get browser/OS specific googlefont font-face file and convert to string to make adjustments
  .then(res => res.text())
  .then(googleFonts => {
    // remove "local" src locations to force using remote (or browser-cached) fonts (no locally installed system fonts)
    googleFonts = googleFonts.replace(/local(.*),\s/g, '')

Note: It's important to not just copy the css from when you look at it in the browser because it varies depending on browser/OS - which is the whole point of Googlefonts.

Note: I'm not sure how to use this in HTML, but considering the JS generates plain text it should be easy to figure it out with css's @import from file.