Mrthesier

Site URL: https://www.steventhesier.com/home
Found instructions on how to use a custom font on a site using the Custom CSS panel on the site. Works fine on desktop but custom font does not display on mobile. Can somebody pinpoint what modifications need to be done so that the font displays on mobile? site is steventhesier.com/home (currently have a custom page as the homepage since site is under construction). Here's the code I have used:
 
font-face {
font-family: Bebas Neue Regular;
src: url(https://static1.squarespace.com/static/5d990778e61ac054756f2583/t/5fce860610a49c4f6915c04d/1607370246070/BebasNeue+Regular.otf),
}
h1 {
font-family: 'Bebas';
}
h2 {
font-family: 'Bebas Neue Bold';
}
h3 {
font-family: 'Bebas Neue Regular';
}
H4 {
font-family: 'Bebas Neue Book';
}
.sqsrte-large {
font-family: 'Bebas Neue Regular';
}
p {
font-family: 'Bebas Neue Light';
}
.sqsrte-small {
font-family: 'Bebas Neue Light';
}