Custom Fonts Not Showing up on Mobile

Site URL: https://www.bassiabassia.com/

Hi,

I've uploaded a custom fonts to my site and I'm struggling to apply them to mobile.

Help is appreciated!! Thank you!

Here's what I have...

/* FOR CUSTOM FONTS */
@font-face {   
font-family: 'Cabinet Grotesk Reg'; 
src: url(https://static1.squarespace.com/static/5f71fe4f95c52a189fa6074b/t/6151e8e64475614ab6aa1561/1632757990865/CabinetGrotesk-Regular.woff)}
@font-face {   
font-family: 'Cabinet Grotesk Medium';   
src: url(https://static1.squarespace.com/static/5f71fe4f95c52a189fa6074b/t/6151e91dc59ffa6574e736aa/1632758045254/CabinetGrotesk-Medium.woff);}
@font-face {   
font-family: 'Cabinet Grotesk Bold'; 
src: url(https://static1.squarespace.com/static/5f71fe4f95c52a189fa6074b/t/6151e907d448400716e87379/1632758023093/CabinetGrotesk-Bold.woff)}
@font-face {   
font-family: 'Neue Haas Unica Reg'; 
src: url(https://static1.squarespace.com/static/5f71fe4f95c52a189fa6074b/t/6151e67321057516694ccac0/1632757364390/NeueHaasUnica-Regular.woff);}
@font-face {   
font-family: 'Neue Haas Unica Bold'; 
src: url(https://static1.squarespace.com/static/5f71fe4f95c52a189fa6074b/t/6151e6850d9cbb50828d9732/1632757381265/NeueHaasUnica-Bold.woff);}
h1, h2, h3, h4, h5 {
font-family: 'Cabinet Grotesk Bold';
}
p, p2 {
font-family: 'Neue Haas Unica Reg';
}
.sqs-block-button-element { 
  font-family: 'Cabinet Grotesk Medium'!important;
}
.header-actions-action .btn {
  font-family: 'Cabinet Grotesk' !important;
}
.header-nav { font-family: 'Cabinet Grotesk Medium'!important;
}
.header-nav-folder-content { 
  font-family: 'Cabinet Grotesk Medium' !important;
}  

Hi. Can you take a screenshot on mobile? Which mobile/browser do you use?