Jump to content

Help Changing Font - Nav Bar Buttons

Go to solution Solved by Web_Solutions,

Recommended Posts

Hey everyone

 

I have a specific font that I'm using on my website but i cant seem to change the font on the nav bar buttons - The buttons are the ones in the screen shot below:

spacer.png

 

I have the custom font files but i just need pointing in the righjt direction in how to apply the font to these buttons.

Any help would be much appreciated, thanks !

Link to comment
  • Replies 7
  • Views 1.3k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

23 minutes ago, SW89 said:

Hey everyone

 

I have a specific font that I'm using on my website but i cant seem to change the font on the nav bar buttons - The buttons are the ones in the screen shot below:

spacer.png

 

I have the custom font files but i just need pointing in the righjt direction in how to apply the font to these buttons.

Any help would be much appreciated, thanks !

Can you share your website URL?

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

Link to comment
15 minutes ago, SW89 said:

Hey everyone

 

I have a specific font that I'm using on my website but i cant seem to change the font on the nav bar buttons - The buttons are the ones in the screen shot below:

spacer.png

 

I have the custom font files but i just need pointing in the righjt direction in how to apply the font to these buttons.

Any help would be much appreciated, thanks !

If you know how to target those buttons (right-click the text and click INSPECT ELEMENT so you can grab the class name), you can follow this guide to get custom fonts installed correctly.

https://www.adlyticmarketing.com/blog/squarespace-using-custom-fonts

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
1 hour ago, Vigasan said:

If you know how to target those buttons (right-click the text and click INSPECT ELEMENT so you can grab the class name), you can follow this guide to get custom fonts installed correctly.

https://www.adlyticmarketing.com/blog/squarespace-using-custom-fonts

 

Hey thanks for the reply

So I right clicked on one of the buttons and got this:

spacer.png

I'm not tech savy so I dont know what I'm looking out for here, could you tell me from that what the class name is?

Edited by SW89
Link to comment
Just now, SW89 said:

So you would use something like the following.

.header-nav-item a{
   font-family: YOUR_FONT !important;
}

Use the link I provided above to set up the font properly for use as well.

If an answer I provide helps you, please mark it as the answer so others can easily access it as well.

I'm a Squarespace Authorized TrainerSquarespace Expert, and Circle Member and I've been helping my clients as well as those here in the forum and in various Squarespace groups with custom coding and support for Squarespace websites. I would love to help you in any way I can.

Squarespace PluginsBook Live Help | Squarespace Video Tutorials | Buy Me a Coffee

Link to comment
52 minutes ago, Vigasan said:

So you would use something like the following.

.header-nav-item a{
   font-family: YOUR_FONT !important;
}

Use the link I provided above to set up the font properly for use as well.

This is what I've done but it doesnt seem to work for the buttons that I mention. It works for everything else apart from the header buttons - this is what I currently have in the Cystom CSS box:

spacer.png

Link to comment
  • Solution
11 minutes ago, SW89 said:

This is what I've done but it doesnt seem to work for the buttons that I mention. It works for everything else apart from the header buttons - this is what I currently have in the Cystom CSS box:

spacer.png

Replace this code with the code below

.header-nav-item a{
  font-family: UNVR67W !important;
}

 

Screenshot_278.png

If my comments are useful, please like and mark my solution as answer. It will encourage me. Thanks

MD Rofik
Website Designer and Digital Marketer

Am I helpful? Want to offer me a coffee?
Send me a message if needed any help. I'll try to reply as soon as possible.


 

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.