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

Question

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.

Answer 1

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.