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

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.