Can't change font-weight in Custom CSS

Site URL: https://www.labaar.nl/under-construction

Hi there,

I have limited experience with Squarespace and custom css.
But what I want is extremely simple and straightforward, but I can't get it done.

I want Header 1 to be extra bold and H2 - H4 light.
In Site Styles I define Headers > Weight 300.
In Custom Css I define H1 as  font-weight 900.
 

But in all browsers H1 has font-weight 600 at the most, in other words: not bold enough.

To make it even more mysterious:
As long as I'm in Edit-mode H1 does have the right weight, but as soon as I click 'DONE', it's shrinks back to a thinner version.
(Inspect Element says it's font-weight 900, but it's not!)

I'm wrecking my brain why this is happening!

All tips are welcome!
Thanks in advance,
Jenny

To add to my own post:

I found the following workaround
(beats me why this works, and the previous method doesn't):

I define font-weight 900 for Headers,
then in Custom CSS specify font-weight 400 for h2-h4.

(BTW, font-weight 300  doesn't work, it looks like 400).

If anyone is able to shed light on the matter, I'd be grateful.

Jenny