Custom font not displaying on mobile

Site URL: http://camillyandarmingotmarried.squarespace.com

Hi there! I uploaded custom CSS to overwrite header and button fonts on my site. They look perfect on desktop but on mobile they aren't showing up. Is there a workaround? Am I doing something wrong? Any help would be so appreciated! Password is carmin.
 

Here is my custom code. Hopefully it was just something I missed! 
 

Quote

 

@font-face {

    font-family: 'FatSansRound';

       src: url('FontURLhttps://static1.squarespace.com/static/6249f6c118357d21cff4a7cb/t/6249f9bacd48dd2cef2ef4e1/1649015226724/FatSansRound.ttf');

  }

a.btn.btn--border.theme-btn--primary-inverse {
    font-family: 'FatSansRound' !important;
}

&.sqs-block-button-element {
    font-family: 'FatSansRound' !important;
}

h1, h2, h3, h4 {font-family: 'FatSansRound';}

 h4 {
-webkit-text-stroke: 1.5px #f7ece4;
   color: #00336a!important;
}

 

On 4/5/2022 at 12:05 AM, tuanphan said:

Your src code is invalid

it should be

src: url('https://static1.squarespace.com/static/6249f6c118357d21cff4a7cb/t/6249f9bacd48dd2cef2ef4e1/1649015226724/FatSansRound.ttf');

 

Thank you so much, such a silly mistake! 🙂