In Chrome @font-face Local() Does Not Find Local Font

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 dow

Solution 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.