How to add my custom font to the navigation menu

Site URL: https://harmonica-mandolin-k5zk.squarespace.com/

Hi,

 So I need some help coding my nav menu, currently the font sits as this:

However I want the font to look like the rest of my custom font:

I have tried so many different codes that I've seen through this forum and I should add I'm new at this whole coding thing, I did this all last night by copying and pasting different codes I've seen. This is all the coding I have used for my font so far:

.newsletter-block .newsletter-form-button {
    font-family: 'Afrah-Light.otf' !important;
    font-size: 12px !important;
    font-weight: 400 !important;
  letter-spacing: .12em !important;}

.collection-type-products .grid-title {
    font-family: 'Afrah-Regular.otf';
}
.blog-item-title h1 {
    font-family: 'Afrah-Regular.otf' !important;
}
nav#mainNavigation span {
    font-family: 'Afrah-thin.otf' !important;
}

.sqs-block-button-element {
    font-family: 'Afrah-Thin.otf' !important;
}

.header-title-text {
  font-family: 'Afrah-Regular.otf';
}
@font-face {

    font-family: 'Afrah-Regular.otf';

       src: url('https://static1.squarespace.com/static/6022cb3df94c921352bb00c0/t/6022cd7cc1e1cc6421e117e3/1612893564915/Afrah-Regular.otf');

  }
@font-face {

    font-family: 'Afrah-Light.otf';

       src: url('https://static1.squarespace.com/static/6022cb3df94c921352bb00c0/t/6022cd6f5d81ae6201c0613a/1612893551991/Afrah-Light.otf');

  }
@font-face {

    font-family: 'Afrah-Thin.otf';

       src: url('https://static1.squarespace.com/static/6022cb3df94c921352bb00c0/t/6022cd76eb9d5f2e0a0d72e2/1612893558855/Afrah-Thin.otf');

  }
h1 {font-family: 'Afrah-Regular.otf';}
h2 {font-family: 'Afrah-Light.otf';}
h3 {font-family: 'Afrah-Light.otf';}
h4 {font-family: 'Afrah-Light.otf';}
p{font-family: 'Afrah-Regular.otf';}

and this is the coding I have most recently tried:

nav.header-menu-nav-list *, .header-nav * {
    font-family: 'Afrah-Light.otf' !important;
}

This is only in my phone version menu, as on the desktop version there isn't a drop down menu, I am also hoping it'll change the font on the desktop menu too.

Thanks in advance!