How add custom font in mobile Nav

Hi

I am trying to add a custom font to my squarespace 7.0 site.

The font has changed in all sections, except for the headers in the footer, and the primary Nav when in mobile screen.

Any advice on how to change this would be greatly appreciated.

I’m a novice so have got to this stage through trial and error, below is all the code i have entered so far.

Thanks

Dan

@font-face {
font-family: MABRY;
src: url(https://static1.squarespace.com/static/54706c4de4b07149942c4e8f/t/63e0b7d43499395e7da6f48f/1675671508614/mabry-light.ttf);
}

h1, h2, h3, h4, p {

  font-family: 'MABRY' !important;

}

// Site Title //
a {
  font-family: 'MABRY' !important;
}
// Site Navigation //
a {
  font-family: 'MABRY' !important;
}

// Button //
.header-actions-action .btn {
  font-family: 'MABRY' !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: 'MABRY' !important;
}

// BLOG//
.blog-title {
  font-family: 'MABRY' !important;
}
.entry-title {
  font-family: 'MABRY' !important;
}

Can you share your website URL?

Sorry here it iS

https://www.danieldarbyjewellery.com

.Header-nav .Header-nav-item {
  font-family: MABRY;
}
  

Hi Ziggy

Thanks so much, unfortunately this doesn’t seem to change the font.

It appears to be the correct font:

Hi

The custom font has changed correctly when viewed on desktop, but on mobile screen size,  the primary mobile nav hasn’t changed. The secondary nav on mobile has also correctly changed to the custom font?

As i say this is the first time I’ve tried to use CSS, so im sure its something i have missed.

Thanks, that’s worked great!

Could i ask a couple of other things?

On mobile, once the primary nav has been clicked and you are taken to the secondary nav. At the top of the screen you can click “Back” to return to the previous screen.

Can the word Back be changed to the custom font, or simply changed to an arrow?

And in the footer, the headings, “JewelleryInfo”, “Customer Care” etc are still the old font, can they be changed to the custom font?

Thanks for all the help! 

Here's a couple more lines of code for you:

.Footer-nav-folder-heading {
  font-family: MABRY;
}
.Mobile-overlay-folder-item--toggle-label {
  font-family: MABRY;
}
  

Can you mark my post as the solution to your question and give it a like, thanks!

Thank you that’s worked perfectly!

This also worked great for me, thanks @Ziggy.

However the secondary, drop down folder within the navigation hasn't changed. Please could you advise me on how to do this?

Kind regards,

59 minutes ago, spacespacespace said:

However the secondary, drop down folder within the navigation hasn't changed. Please could you advise me on how to do this?

It looks like you're on an old template, can you share your website URL?

https://sapphire-bird-b6z8.squarespace.com/

1 minute ago, spacespacespace said:

https://sapphire-bird-b6z8.squarespace.com/

You need to add this class:

.Mobile-overlay-folder-item

@Ziggy

That worked, fantastic! Thank you so much!

Also do you know how to make the Mobile Menu Icon (the +) have more weight to it? Like the logo for the website?

Kind regards,

16 hours ago, spacespacespace said:

Also do you know how to make the Mobile Menu Icon (the +) have more weight to it? Like the logo for the website?

I can't see your website any longer, it's password protected.