bold custom font not working on Chrome 90, only showing regular font-weight

Question

I'm using the custom font 'Tangerine', but it doesn't display correctly on Chrome, even on Firefox it's working. The heading should be displayed as bold as in Firefox, but in Chrome it's just showing the regular font-weight. I just need the bold-Version of Tangerine.

Versions:

• Chrome at Windows 10 (90.0.4430.72)
• Chromium at Linux (90.0.4430.72)

CSS:

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
}

h1 {font-family:'Tangerine', sans-serif}

What did I tried:

I used font-weight:700 and font-style:normal in @font-face, but it doesn't helped. I also tried to delete woff2 and woff to check if it's working with just truetype-format.

Then I used the regular font, to check if there are differences but Chrome just showing the regular font. (How does it even know, how Regular is looking?) And after doing that, Firefox only showed the regular font too. So it's only working on Firefox, if I just provide the bold-font.

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineReg.woff2') format('woff2'),
        url('tangerine/TangerineReg.woff') format('woff'),
        url('tangerine/TangerineReg.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
}

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
}

h1 {font-family:'Tangerine', sans-serif}

Please help me, I don't know what's going on with these fonts. Without being bold the font can't be read. Thank you! :)

Answer 1

The solution was to only provide the Regular Font-Weight. Now the different browsers make the bold-font by themselves.

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineRegular.woff2') format('woff2'),
        url('tangerine/TangerineRegular.woff') format('woff'),
        url('tangerine/TangerineRegular.ttf') format('truetype');
}

Another solution was to provide both fonts, without font-weight attributes. If I use both, Google Chrome is still using his own generating bold-font.

This is only working because the later font-face rule overwrites the first one. (Like always in CSS when rules have exactly same specificity)

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
}

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineRegular.woff2') format('woff2'),
        url('tangerine/TangerineRegular.woff') format('woff'),
        url('tangerine/TangerineRegular.ttf') format('truetype');
}

When I try to use first the Regular and then Bold both browsers it's only working for Firefox and is failing for chrome.

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineRegular.woff2') format('woff2'),
        url('tangerine/TangerineRegular.woff') format('woff'),
        url('tangerine/TangerineRegular.ttf') format('truetype');
}

@font-face { 
    font-family: 'Tangerine';
    src:url('tangerine/TangerineBold.woff2') format('woff2'),
        url('tangerine/TangerineBold.woff') format('woff'),
        url('tangerine/TangerineBold.ttf') format('truetype');
}

When I use font-weights for both fonts as in my question, Google Chrome and Firefox are failing. This also happened when using only font-weight: 700 for bold-font. When I only use font-weight: 400 for the regular it's working for both browsers but it's only working as showed in case 2.

-> Google Chrome needs the Regular-Font to generate an own bold font and the bold version of the font (tangerine/TangerineBold.woff2) is somehow corrupted and can't be used... In Firefox the generated bold font is a bit smaller than the real bold-font.

I'm happy to help if some users have the same problem in the future. :)