Custom Font Not Working for Mobiel

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

Hello,

When viewing the mobile version of my website on my desktop, the custom font is working. However, when I use my actual mobile device to view my website, my custom fonts are not loading. I have a few lines of code that affect the mobile version's line height and size, but I've tried taking them out and it still does not solve the problem. 

The custom CSS I've used is:

@font-face {
font-family: 'Outfit';
src: url('https://static1.squarespace.com/static/609d4703efea211d8e727dc9/t/625aec588f39aa45d3c1b992/1650125912669/Outfit-VariableFont_wght.ttf');
  }

h1, h2, h3, h4 {
font-family: 'Outfit';}
p {
font-family: 'Outfit';}
misc {
font-family: 'Outfit';}
.header-nav *, nav.header-menu-nav-list * {
    font-family: Outfit;
}

The first picture I've attached is how the mobile version looks on my desktop, the second is a phone screenshot of how it actually appears. Any help/ feedback would be greatly appreciated!

Do you have any other font format? We can try declared ttf + otf + woff, + woff2,..