Custom Font not showing on mobile devices

Hello, the custom font (H1/H2) works on desktop but not mobile... Any ideas what I've done wrong?! 🙂

Would really appreciate any advice! 

@font-face {
    font-family: 'Apercu';
       src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6e24f87e7ef4c01c85/1593686638677/Apercu+Light.otf');
    font-weight: normal;
    font-style: normal;
  }
@font-face {
   font-family: 'Apercu Bold' ;
     src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6added911dbc28d463/1593686634952/Apercu+Bold.otf') ;
   font-weight: bold;
  font-style: normal;
   }
@font-face {
   font-family: 'Remachine Script';
     src: url('https://static1.squarespace.com/static/5dc68cafe8c8347aab4afb9b/t/5efdba6added911dbc28d463/1593686634952/RemachineScript.otf') ;
   font-weight: normal;
  font-style: normal;
}
h1 {
  font-family: 'RemachineScript';
}
h2 {
  font-family: 'RemachineScript';
}
h3 {
  font-family:'Apercu';
}
p {
  font-family:'Apercu';
}
.Header-nav-item {
  font-family: Apercu;
  font-size: white;
}
.Mobile-overlay-nav-item { font-family: Apercu;}
form {
color: #000000;
font-family: Apercu Bold !important;
text-align: left;
font-weight: 300;
font-size: 12pt;
  
}

.carousel-cell {
 width: 100%;
 height: 200px;
 text-align: center;
 margin-right: 30px;
}

/* Dropdown Box */
.dropdown {
margin-bottom: 3vw; /*spacing between boxes */
}

.dropdown h1{
font-size: 1.3rem; /*question font size */
background: #000000; /*box background colour */
color: #FFFFFF !important; /*question text colour*/
padding: 10px;
}

.dropdown p {
font-style: italic; /* answer italic */
}

.answer {
display: none;
margin-top: 4vw; /*space between question and answer */
border-left: #e3e3e3 solid 1px; /*grey line beside answer */
padding-left: 2vw; /*space between line and answer */
}

.dropdown h1:after{
content: "\2193"; /* arrow */
text-align:right;
float: right;
}

Can you share link to your site? We can check easier