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, t
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.