Custom CSS font not carrying over to various platforms

Hey everyone -- 

I have absolutely 0 experience using CSS but Squarespace's out of the box font packs don't have anything I want to use. They have a 'Noto Serif' option, but not 'Noto Serif Display,' which is what I want.

I've configured some custom CSS based on recommended code I found around the web and haven't been able to get the CSS to stick when I view my site on Safari or on mobile (which for me, by default, is Safari because I'm on iOS). It also doesn't display properly when I open the link via Instagram, etc.

I ran onto another forum post about this that recommended double-checking naming conventions for the custom fonts. I've kept them all consistent so I don't know what else I'm doing wrong. (Probably something really obvious. 😅)

Here's what I've got:

@font-face {

    font-family: 'NotoSerifDisplay-VariableFont_wdth,wght';

  src: url('https://static1.squarespace.com/static/65d91112b6071f2ddae29cab/t/65e3b0334687304c21bf8aa1/1709420603355/NotoSerifDisplay-VariableFont_wdth%2Cwght.ttf');
  
  }

h1 {font-family: 'NotoSerifDisplay-BoldItalic';}
h2 {font-family: 'NotoSerifDisplay-Bold';}
h3 {font-family: 'NotoSerifDisplay-Bold';}
h4 {font-family: 'NotoSerifDisplay-Regular copy';}

I'm also unsure if I need to set a new @font-face rule for every style of the header fonts or if this ^ is the way to do it. The source url goes to the only instance of the font that I uploaded, which is an aggregate of all the Noto Serif Display styles. Do I need to be adding individual source URLs for each of the styles I want to use?

Attaching screenshots of what my H1 looks like on Chrome vs. Safari. Top is Chrome, bottom is Safari. (There's a weird cutoff thing happening on the Safari header as well. 🧐

Any insight would be SO appreciated!

Both font-family need to be same