Viewport settings erasing font when small

Site URL: https://www.sweetdonnasdesserts.com/

I am trying to have my H1 text appear smaller when on mobile so I set up the following code:

  h1 {
  font-family:"Strawberry Whipped Cream" !important;
  font-size: 10vw;
  text-shadow:4px 4px 10px #000;
  }
 

When the text shrinks on mobile it erases the font family. Am I going about this the wrong way?

I don't see that font at all, on any size. Do you have it installed into your page?

It should be installed now; same issue.

That font still isn't installed properly to your page.

Where did you get the font from?

I see the issue. The code is incorrect for the font url, as well as the name of the font-family:

@font-face {
  font-family: StrawberryWhippedCream;
  src: url(https://static1.squarespace.com/static/5eea86de6619d84ab8136723/t/5f0b3e5db4e91d7c8f416bd2/1594572381875/Strawberry+Whipped+Cream_2.ttf);
  font-weight: normal;
  font-style: normal;
}

h1 {
font-family: StrawberryWhippedCream;
font-size: 10vw;
text-shadow: 4px 4px 10px #000;
}

Thanks for the help, I'm still misunderstanding this I guess. I downloaded the font onto my computer using dafont.com. Imported the file into custom CSS and copied the source URL provided. I was following a guide for installing custom font and was getting an error after trying:

@font-face{
   font-family: 'Butler' ;
     src: url('https://static1.squarespace.com/static/57e2c4ed893fc0209923cd9e/t/57e31c2be3df280f317a0708/1474501675437/Butler_Medium_Stencil.otf') ;
   font-weight: bold;
  font-style: italic;
}

and replacing the fields with my own.

What further confuses me is that the font worked perfectly fine even before I did that; it just wasn't scaling on mobile hence how I got here.

I am not sure how it worked before, the font face was incorrect in the h1 tag and the url was missing ( ).

Is it working properly now? It seems to be good on my end.

Yes! Thank you very much for the help.