Custom font will not translate to mobile navigation bar

I have tried countless solutions in order to get my custom imported font to appear on my mobile preview - specifically, my mobile navigation menu. For the life of me, I cannot get my mobile menu to show the custom font. Here is the code I reverted back to, after trying countless code combinations found online:

@font-face {
font-family: ChakraPetch-Medium;
src: url(https://static1.squarespace.com/static/64513a4734c55b0aac949cad/t/6451521b6dd392570c03f9a5/1683051035425/ChakraPetch-Medium.ttf)
}
header#header *, h1, h2, h3, p {
    font-family: 'ChakraPetch-Medium';

I would simply like this font to be applied to my entire website - mobile navigation menu included. Any help would be very appreciated. Thanks!

Can you share your website URL?

Hey Ziggy, my website URL is https://www.nikecba.com , I will PM you the password as it is not live yet. Thanks!

You can try this CSS, though it may apply the font too widely:

* {
  font-family: 'ChakraPetch-Medium';
}

Hey Ziggy, thanks for the response. I tried inputting this a couple of different ways and it still doesn't seem to target my mobile navigation. Here is a screenshot of my mobile preview, still showing in Helvetica - 

Try this Custom CSS:

#mobileNav ul {
  font-family: 'ChakraPetch-Medium' !important;
}

Thanks Ziggy - still not working on my end for some reason. Any other possibilities? Thanks for the help. 

What is access password?