What's font-weight doing in font-face since I need to set it for the element too?

I really don't get it. I have the next css:

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJfecg.woff2) format('woff2');
}

h1{
  font-family:Poppins;
}

And the next html:

<h1>
  Hello world!
</h1>

Why isn't the h1 font weight set as 400 ?

To make the h1 to have font-weight:400, I need to set it in the h1 element, as this:

h1{
  font-family:Poppins;
  font-weight:400;
}

Else, the font-weight will be bold.

Demo without font-weight:400 for h1 https://jsfiddle.net/7kbnr6gz/

Demo with font-weight:400 for h1 https://jsfiddle.net/keg4w5nh/

So, the question is:

Why should I set the font-weight in the @font-face, since is not taked in consideration ?

Solution

The default font-weight for h1 is bold, so unless you set a different font-weight explicitly, that’s what the style will have. You declared a font in the @font-face rule with weight 400, but that just provides a characterization for the font resource; it doesn’t override the style. It appears the font file you’re accessing really is a regular weight, so what is probably happening is that the browser is applying bold stimulation, since the style specifies bold.