Fonts appearing weird on iphone / ipad

Hello! I am working on customizing this website with CSS (website: https://vincivr.squarespace.com/ password: vinci), but I'm hitting a few odd kinks that I haven't come across before: 

1. When I go to view the website on my iphone and ipad the header fonts looks like it's been duplicated and very slightly offset, but the paragraph fonts (Adobe fonts) all look fine. The header fonts are Google fonts that I originally uploaded as variable font files, but I tried uploading them as static files to see if that would work better. Weirdly it looks fine for the custom styled "code" monospace font even though I used the EXACT same formatting, but h1, h2, h3 and h4 all look stretched / duplicated and very slightly offset. I have tried many things to fix this, I saw on another forum posting a similar problem was occurring, but their solution won't work for me since I need to utilize as many of the h and p styles as I can without using html or anything like that (needs to be easy/simple for a client to update). 

2. I wanted the headline of the hero section on the home page to be larger than the rest of the website, so I styled it as "code" to utilize the monospace font. But for some reason when I'm trying to customize the code for the mobile view, only the line-height is reflected, and not the font-size. 

Any help is welcome because I genuinely have scoured my brain, the internet, and ChatGPT for ideas and I have not found anything that works for either of these yet.

— T ❤️ 

Here is my code for reference:  

//Font Sources//


@font-face {
   font-family: 'Plus Jakarta Sans Extra Bold';
   src: url('https://static1.squarespace.com/static/65ef45bfbc5d471ef3001f94/t/65f4c5d09eadff42082a58f4/1710540240917/PlusJakartaSans-ExtraBold.ttf');
}

@font-face {
   font-family: 'Plus Jakarta Sans Bold';
   src: url('https://static1.squarespace.com/static/65ef45bfbc5d471ef3001f94/t/65f4c5c706a0d833323e44c9/1710540231569/PlusJakartaSans-Bold.ttf');
}

@font-face {
   font-family: 'Satoshi Black';
   src: url('https://static1.squarespace.com/static/65ef45bfbc5d471ef3001f94/t/65f4c5f239dd880f9dc65f80/1710540274167/Satoshi-Black.ttf')
}


//font size on home page//

code {
  font-family: 'Plus Jakarta Sans Bold', sans-serif !important; 
  text-wrap: balance !important;
  font-size: 4.4rem !important;
  color: white !important;
}

//Font Styles//

h1 {
  font-family: 'Plus Jakarta Sans Bold', sans-serif !important;
  text-wrap: balance !important;
}

h2 {
  font-family: 'Plus Jakarta Sans Bold', sans-serif !important;
  margin-bottom: .4em !important;
    text-wrap: balance !important;
}

h3 {
  font-family: 'Plus Jakarta Sans Extra Bold', sans-serif !important;
}

h3 strong {
  font-size: 4em !important; 
}

h4 {
  font-family: 'Satoshi Black', sans-serif !important;
  text-transform: uppercase !important;
  margin-bottom: -20px !important;
}


.sqsrte-large {
  font-family: 'ff-real-text-pro' !important; 
  font-weight: 300 !important;
} 

p {
  font-family: 'ff-real-text-pro', sans-serif !important;
  font-weight: 300 !important;
}

p strong {
  font-family: 'Satoshi Black', sans-serif !important;
  text-transform: uppercase !important;
  font-size: .8em !important;
}

.sqsrte-small {
  font-family: 'ff-real-text-pro', san-serif !important; 
  font-weight: 500 !important;
  line-height: 1.3em;
}



//mobile//


@media only screen and (max-width: 700px) {

code {font-size: 2.5rem !important;
        line-height: 2.2rem !important;}
  
h1 {font-size: 2.5rem !important;
      line-height: 3.3rem !important;}
  
h2 {font-size: 2.2rem !important;
      line-height: 2.5rem !important;}
  
  h4 {font-size: 1rem !important;}
  
  sqsrte-large {font-size: 1.3rem !important;}
  
  p {font-size: 1.1rem !important;}
  
  sqsrte-small {font-size: .9rem !important;}
  
}

Mine is navigation link, it disappeared in Mobile view