In Chrome @font-face local() does not find local font

9
votes

Google Chrome does not use font from local system and downloads from server instead, but Firefox uses it correctly from the local system.

As I can see in DevTools, the font was downloaded from the server: DevTools -> Computed -> Rendered Fonts [img]

In the Firefox I can see, that we use local font: FirefoxTools -> Fonts[img]

@font-face {
  font-family: 'Calibri';
  src:  local(Calibri Italic),
        local(Calibri-Italic),
        url('../fonts/calibrii.woff2') format('woff2'), 
        url('../fonts/calibrii.woff') format('woff'), 
        url('../fonts/calibrii.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

This doesn't work if I use Calibri Italic (or Calibri Bold, 'Calibri Italic', 'Calibri-Italic', etc.). If I type local(Calibri), in both browsers the font will be local.

1
htmlcssgoogle-chromefontsfont-face
I have exactly the same problem (just with a different font). From my experience that happens on Chrome/Windows only. The local font gets resolved properly on Chrome/Mac and other browsers. – TMG
This is an issue for me in Chromium 73 but not 80 – binaryfunt

1 Answers

7
votes

Chrome has trouble matching local font names, as this bugreport explains. In short this is caused by what the browser consideres the name for a font. Chrome expects the "root" name (in your case, Calibri) and deducts it needs the italic version from your @font-face rule. Firefox does the reverse: it looks directly for the name. This comment demonstrates that.

So it seems one approach breaks in Chrome, the other in Firefox, until this bug is fixed. I suppose it's up to you to determine which browser behaviour you want to go with.