Jump to content

Custom font for site header nav buttons

Recommended Posts

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), 
}

Link to comment

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.

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment
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!

Work With Me 🖥️💻📱

Please remember to tag me so that I get a notification and respond to your help requests.

If my answers have helped you, please drop a like and mark my answer as best to help other users find solutions quickly.

You can also thank me or make requests by buying me a coffee . (Caffeine fuels me to take more requests)

For Squarespace Tips & Tricks, visit @squareskills (Youtube 📺 Tutorials)

For Premium and FREE plugins, visit Squareskills (Plugin Store) 🧩

Some links may be affiliate/referral links.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.