Custom fonts not working on mobile/ipad

Site URL: https://kristelandnic.com/

Site PW: 94591

Desktop fonts are fine. I feel like I have all the right code/CSS set up but the custom font is only working for P and not H1, H2, H3 on mobile.
Any help is much appreciated!

 

@font-face {   
@font-family: 'NFCarta-Thin';   
src: url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e77d03fe8ff44374c22be4f/1584910400105/NFCarta-Thin.otf), url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e8b9315a3c03356e0608ee0/1586205461101/NFCarta-Thin.ttf), url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e77d01de08d1b666d12a4f3/1584910365731/NFCarta-Thin.woff), url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e77d039d07f4670779ea5ce/1584910393971/NFCarta-Thin.woff2); 
}

@font-face {   
font-family: 'apercu-webfont';   
src: url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e8aa6775803e9387ff9f363/1586144887674/apercu-webfont.ttf),
url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e8aa67fa75db676523aa9bd/1586144895568/apercu-webfont.woff), url(https://static1.squarespace.com/static/5e6861182475ee58a83c927b/t/5e8aa686776c472b7268c0ba/1586144902916/apercu-webfont.woff2); 
}

.mobile-bar-wrapper * {
   font-family: 'NFCarta-Thiin';
   font-size: 24px;
}

h1 {
  font-family: 'NFCarta-Thin';
  font-size: 120px;
}

h2 {
  font-family: 'NFCarta-Thin';
  font-size: 175px;
}

p {
  font-family: 'apercu-webfont';
  font-size: 12px;
}
 

@font-face {

font-family: fontname;

}

font-family

not

@font-family