safari Custom navigation font showing up on Chrome but not Safari

Site URL: https://chihuahua-parrot-rjda.squarespace.com/

I've added a custom font (both woff and woff2 files) and it's working fine for Chrome but not Safari.

Safari is showing up as a serif font, even though the font pack selected in squarespace is sans serif (Neue Haas).

Here is my code:

@font-face {font-family: 'Banana-Grotesk-Regular'; src:url(https://static1.squarespace.com/static/6099b1999f075203e3da1346/t/609cbd37811c1e67f7a48445/1620884791285/BananaGrotesk-Regular.woff) format('woff'),
 url(https://static1.squarespace.com/static/6099b1999f075203e3da1346/t/609cbd3ca6cf026bb5edcc79/1620884796131/BananaGrotesk-Regular.woff2) format('woff2'),}

.header-nav *, nav.header-menu-nav-list *  {
    font-family: 'BananaGrotesk-Regular' !important;}

Site URL: https://chihuahua-parrot-rjda.squarespace.com/

Site password: RG999!!!

Any help would be fabulous! Thank you!

Try this

.header-nav *,nav.header-menu-nav-list * {
    font-family: 'BananaGrotesk-Regular' !important;
}