LTB

Hi, custom font on mobile isn't working. Works perfect on desktop. Does anyone know what we're doing wrong?

Here's the code:

@font-face {
font-family: black bison;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b18f4acd29ed4712460f68/1655803722312/Black+bison.ttf);
}
h1 {
font-family: 'black bison';
}

@font-face {
font-family: Nunito Bold;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b1909b88edd70e856504ef/1655804059957/Nunito-ExtraBold.ttf);
}
h2 {
font-family: 'Nunito Bold';
}

@font-face {
font-family: Nunito;
src: url(https://static1.squarespace.com/static/62a09079af6ca364d721392b/t/62b19100dec5cf0dce3d2ed3/1655804161254/Nunito-ExtraLight.ttf);
}
p {
font-family: 'Nunito';
}

.sqsrte-large {
font-family: 'Nunito Bold';
}

.sqsrte-small {
font-family: 'Nunito';
}

.header-nav-item a {
  font-family: 'Nunito Bold' !important;
}

nav.header-menu-nav-list a {
    font-family: 'Nunito Bold' !important;
}

Thanks so much for your help!