CSS mixing up font weights

Hello,
I (on macOS) am really at my wits’ end. After exporting a font with correctly set weight classes, whether in Chrome or Firefox, the browser displays incorrect weight for the 300 and 500 weight classes. 300 is displayed a a 500 weight, and 500 is displayed as 400 weight (so: 200→200, 300→500, 400→400, 500→400, 600→600). I have tried everything under my sun, clearing the font cache and restarting numerous times. Inspecting the static TTFs, the weight classes are correctly set (I had even especially added a weightClass custom parameter to each instance just to be absolutely sure). Sadly, I don’t have another machine to test on.

Does anybody have a clue what could be going on? Many thanks.

What’s the @font-face code you’re using?

Very basic, first I was testing by simply inserting it on an existing website and editing the font-weight values, then I wrote an absolute bare-bones 10 line test site. Really simply

    font-family: "myfont";
    font-weight: 400;

and it doesn’t work. The weights are still mixed up between the 300 and 500 instances. I can’t tell whether it’s something to do with my font cache, as I can’t test on another machine, but I cleared my font cache upwards of five times and it doesn’t seem to make a difference.,

And each @font-face declaration has a different font-weight value?

@font-face {
    font-family: "myfont";
    src: url(myfont-Regular.woff2);
    font-weight: 400;
}

@font-face {
    font-family: "myfont";
    src: url(myfont-Light.woff2);
    font-weight: 300;
}

@font-face {
    font-family: "myfont";
    src: url(myfont-Medium.woff2);
    font-weight: 500;
}

/* ... */

I tested by simply changing the font-weight to different values, and refreshing. Seven lines, nothing else:

<style type="text/css">
	.body {
		font-family: "myfont", sans-serif;
		font-weight: 400;
	}
</style>
<p class="body">handgloves</p>

So, exporting as an entirely new family and installing as a fresh font yields the same problems, so it can’t be anything to do with my font cache but with my exported instances. Would anybody be willing to take a look? I really can’t understand what is going on, everything looks fine with the files.

As far as I know, browsers do not look at the weight class in the font file when loaded using @font-face. Are you using @font-face or are you loading the fonts from your system fonts without first declaring them in the CSS?

My test HTML file is really only seven lines long and encompasses nothing but the code from my previous message.

In that case it’s a browser issue. Webbrowsers are not particularly interested to load the exact right font style for fonts installed on the system. You need to specify the font files using @font-face in the CSS code. Export your font to WOFF2 and reference the WOFF2 file using the src property of the @font-face block. See the Mozilla documentation for details.

So there’s not a chance there’s something wrong with my TTFs? Then my mind can rest at ease. Oddly enough, it works fine with other families (also my own). Oh well. Thanks a lot!

At least in my experience, browsers are bad at picking the correct font style if the fonts are not included with @font-face. And they do not need to be good at it since in practice the only fonts that are loaded outside of @font-face are system fonts like Verdana and Helvetica. So as long as those work reasonably well, most browsers don’t care.

It’s just surprising to me that both Firefox and Chrome produce the exact same behaviour, despite my TTFs being absolutely fine and correctly numbered. Also, I don’t understand why this specific family doesn’t work, while other families work perfectly fine.

Why do you link to an installed font in the first place, and not define a src()?

I was trying out the font on the client’s website, simply replacing the preferred font family by my own in Firefox, which is very easy with installed fonts. Upon testing different font-weight values, I ran into this curious issue. I’m well aware that this is not how it will end up being used, but I was still worried I had messed up something in my exports.