Force Chrome to use external font in CSS

Question

It took me a long time to figure out, that Chrome always prefers local installed fonts over a font with the same name that is linked in the css (See also https://mcmap.net/q/368310/-font-weight-ignored-in-chrome). My problem is how to figure out, to force Chrome not to do so.

On my page https://www.amon.cc/ I use "Roboto Light" from Google Fonts (https://fonts.google.com/specimen/Roboto), like this:

<link href="//fonts.googleapis.com/css?family=Roboto:300" rel="stylesheet" type="text/css" />

In my CSS file the font is declared like this:

body{
  ...
  font-family:Roboto,...;
  font-weight:300;
 ....
}

Which works perfectly fine in FF, IE, Edge:

But the font is always thicker in Chrome:

The reason: On my private Windows 10 and also on by business computer the font "Roboto" is pre-installed on Windows: Robot Regular, Robot Condensed. But there is no Roboto Thin or Robot Light, so it seems Chrome has a fallback to Roboto Regular.

When deleting the Robot fontset from Windows, Chrome uses the declared web font and displays it the way I want it. I could not figure out, how to "force" Chrome not to use the local installation and instead use the on the CDN.

However, Chrome can display the Roboto font in all different variants on the https://fonts.google.com/specimen/Roboto website (even with my local installed Robot font). I couldn't find out the trick how this has been done.

Tarantass

Answer 1

You can rename the font in your CSS and still use the distant woff file. For example:

@font-face {
  font-family: 'RobotoBis';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Pru33qjShpZSmG3z6VYwnRJtnKITppOI_IvcXXDNrsc.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}


@font-face {
  font-family: 'RobotoBis';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(http://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
h1 {
  font-family: RobotoBis;
}

<h1>Hello world !</h1>

But the dark side of this method is that Google can change the font URL in the future (that is mainly probable). So host you own font files to avoid this problem.

And of course, it can be apply only for the websites you own and where you can customize the CSS...

Prunella

Interesting approach! Thank you for pointing out the problem with possible url change by Google. In my case "Roboto" is under Apache License, so I could do the hosting by myself (which I propably will) and won't use the google web font at all. I checked why it works at Google Web Fonts page. There the font name is not "Roboto", it is "Roboto script=all rev=1" (font-family: "Roboto script=all rev=1", "Adobe Blank"). I guess it could have been done the same way as you did it be locally renaming the font. – Tarantass

Answer 2

It took sometime to figure out this mess. This problem occurred to me when I updated chrome. To solve this problem in my mac. I have opened the font app and delete the Roboto font and reinstalled it from https://www.fontsquirrel.com/fonts/roboto-2014. It has fixed my problem.

Clearway