Define google font style variant for headings

Hi, I use this snippet

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Display:wght@300&display=swap');

.markdown-source-view.mod-cm6.is-readable-line-width .cm-line {
	font-family:	Noto Sans Display, sans-serif !important;
}

.markdown-preview-view {
	font-family:	Noto Sans Display, sans-serif !important;
}

.markdown-source-view.mod-cm6 .cm-line.HyperMD-codeblock {
	font-family:	Noto Sans Display, sans-serif !important;
}

to tell my theme to use “Noto Sans Display - light 300” style variant as font in all normal text situations but I would like also to set the headings as “Noto Sans Display - Black 900” because I don’t like their automatic bold version created by onsidian, it’s too light.
I would add codes like these to the snippet:

.view-header-title { font-family: "CSS rule"; }

/* change header font in editing view */
.cm-header-1,
.cm-header-2,
.cm-header-3,
.cm-header-4,
.cm-header-5,
.cm-header-6 {
    font-family: "CSS rule" !important;
}

/* change header font in reading view */
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
    font-family: "CSS rule" !important;
}

… but I don’t know how to do it because I see on Google Font properties that css rules are the same for both “Light 300” and “Black 900” : font-family: 'Noto Sans Display', sans-serif;