Custom font for site header nav buttons

Site URL: https://www.crownposada.co.uk/

Hi,

Please can someone advise a custom code to change the navigation buttons on the header of this site.

This is the current code I have.

//---Custom Fonts---

h1, h2 , h3, h4, {
font-family: 'scriptoriumprimer';
}

//---Font Upload---
@font-face {
font-family: 'scriptoriumprimer';  
src: url(https://static1.squarespace.com/static/628652b39b7182184e1cc544/t/628781b733ad5d059584a8bd/1653047735391/Scriptorium+-+Primer.ttf), 
}

Hi @SeanCrafted

Can you clarify - you're looking to change the font family, correct?

In that case, the issue is that you're targeting headings and not the navigation links.

You can add this

//SquareSkills
//Change Menu Navigation Font
.header-nav-item a {
    font-family: 'scriptoriumprimer';
}

or just add update your existing code:

//SquareSkills
//Assign Custom Fonts
h1, h2 , h3, h4, 
.header-nav-item a {
font-family: 'scriptoriumprimer';
}

Please note that this will only fix things for Desktop.

If you also want mobile you'll also need to use:

//SquareSkills
//Change Mobile Menu Font
.header-menu-nav a {
    font-family: 'scriptoriumprimer';
}

Or if you want to keep them grouped

//SquareSkills
//Assign Custom Fonts
h1, h2 , h3, h4, 
.header-nav-item a,
.header-menu-nav a {
font-family: 'scriptoriumprimer';
}

You'll see I've split headings, desktop and mobile into separate lines - this is totally optional and is just as I find it makes things clearer when editing but you can put them all on one line too.

Hope this helps.

This has worked just as required. Thanks so much 

6 hours ago, SeanCrafted said:

This has worked just as required. Thanks so much 

Glad to help.

Please mark your question as resolved so that other users with the same issue can quickly find the solution!