My custom CSS code not working on other screens.

Hi, I have zero knowledge of coding, but I wanted to custom change the font across my website.

I have the following code in the custom CSS window:

@font-face {

    font-family: 'Mona Sans';

       src: url('FontURLhttps://static1.squarespace.com/static/654be898a0e99642a3023894/t/65551e86203db543e89a0be9/1700077190867/Mona-Sans-Medium.otf');

  }

h1 {font-family: 'Mona Sans' !important;}
h2 {font-family: 'Mona Sans' !important;}
h3 {font-family: 'Mona Sans' !important;}
h4 {font-family: 'Mona Sans' !important;}
p {font-family: 'Mona Sans' !important;}

...and it shows up like this on my screen.

But it doesn't reflect the change on other screens (shows up as a serif font instead).

Any help would be SUPER appreciated!!

This worked, thank you so much!!

@kellsung15 you're welcome! glad it worked