#font-face with multiple files looks different in Firefox and Chrome - html

Question

I've css for Custom Arial font face for regular, bold, italic and bold-italic style.
And for that all different font files are created arial_mt_stdregular, arial_mt_stdbold, arial_mt_stditalic and arial_mt_stdbold_italic
#span{
font-family: 'arial_mt_stditalic';
font-style: italic;
font-size: 30px;
}
In Firefox, this apply italic style twice as Chrome and IE.
So my content looks twice italic and twice bold in FireFox than Chrome and IE.
#font-face {
font-family: 'arial_mt_stdregular';
src: url('arialmtstd-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stdbold';
src: url('arialmtstd-bold-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stditalic';
src: url('arialmtstd-italic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial_mt_stdbold_italic';
src: url('arialmtstd-bolditalic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
sample from FF and Chrome
Why Chrome and IE not applied font-style:italic for "arial_mt_stditalic" font?

Answer 1

I suspect this is browsers trying to simulate italics when you've provided an italic font but told the browser it isn't italic.
When applying the font you have:
font-family: 'arial_mt_stditalic';
font-style: italic;
But in the single #font-face for rial_mt_stditalic you have
font-style: normal;
Ie. you have told the browser to use a non-italic typeface as italic.
All the #font-face definitions should have the same value for font-family, and the other properties then tell the browser what variant, weight, etc. that particular download is.
When you use that font-family the browser matches on the other properties to select the download.
Ie. you should have:
#span{
font-family: 'arial mt';
font-style: italic;
font-size: 30px;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-webfont.woff2') format('woff2');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-bold-webfont.woff2') format('woff2');
font-weight: bold;
font-style: normal;
}
#font-face {
font-family: 'arial mt';
src: url('arialmtstd-italic-webfont.woff2') format('woff2');
font-weight: normal;
font-style: italic;
}
// etc.