custom font does not display on mobile for 7.1 site

Site URL: http://www.beautybychantalmarie.squarespace.com

uploaded a custom font and have added the proper code for it to display... font displays on desktop but not mobile. Not sure how to troubleshoot this

@font-face {
font-family: Kapital Regular;
src: url(https://static1.squarespace.com/static/5fbaa2c36a3a261f9dd70dc1/t/5fbabc7f3a91a317f38a224f/1606073472474/Kapital+Regular.otf),
}
h1 {
font-family: 'Kapital Demi';
}

h2 {
font-family: 'Kapital Demi';
}

h3 {
font-family: 'Kapital Medium';
}

H4 {
font-family: 'Kapital Medium';
}

.sqsrte-large {
font-family: 'Kapital Regular';
}

p {
font-family: 'Kapital Light';
}

.header-nav *, nav.header-menu-nav-list * {
    font-family: Kapital Regular;
}