Jump to content

How add custom font in mobile Nav

Go to solution Solved by Ziggy,

Recommended Posts

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;
}

Link to comment

Can you share your website URL?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

It appears to be the correct font:

image.png.f38d15d7009b6e3232c982624938d65e.png

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.

Link to comment
  • Solution

Sorry, try this:

.Mobile-overlay-nav .Mobile-overlay-nav-item {
  font-family: MABRY !important;
}

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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! 

Link to comment

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!

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 5 months later...
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?

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
1 minute ago, spacespacespace said:

You need to add this class:

.Mobile-overlay-folder-item

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

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.