Jump to content
Join us live on Dec. 11 as we discuss the most-anticipated designs of 2025 with three brand design experts. ×

Custom Font for Header

By mjanas10, in Customize with code

Go to solution Solved by Ziggy,

Recommended Posts

mjanas10 Level 4

mjanas10

Posted
Posted

Hi, 

 

Any idea how to change the font in the header to a custom font? Trying to "inspect" the Preview page and then searching for the most likely CSS class selector but I can't succeed.

There must be an easier way?

 

Thanks

  • Replies 18
  • Views 4.1k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Ziggy
Ziggy

Thanks for that. I've got code for you here, this will update your site title to your custom font: .header-title-text { font-family: 'Santoshi'; } If that has helped you, can you mark this pos

mjanas10
mjanas10

Thanks Ziggy,  I've set up a password... and DM'ed you it. 

Ziggy
Ziggy

You can use the Chrome Developer Tools, and then inspect elements and look at the elements. This list can also be very helpful:  

Ziggy Level 14

Ziggy

Posted
Posted

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

mjanas10 Level 4

mjanas10

Posted
  • Author
Posted

Just as an experiment, I wanted to "code inject" the header in the HEADER category of Code Injection. However, it didn't work.. is this code wrong?

<head>
<style>
p {
  color: red;
} 
</style>
</head>

Ziggy Level 14

Ziggy

Posted
Posted

The reason for asking for you website URL isn't to judge your work, it's to inspect your website specifically to make sure I can give you the correct code as Squarespace templates (not so much the new ones) vary in their use of elements selectors. It also would tell me the custom font you're using. 

You can try adding this to Custom CSS: 

.header .header-nav-wrapper a, .header .language-item a {
  font-family: 'times new roman';
}

Replace TNM with your font and let me know if that works.

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Ziggy Level 14

Ziggy

Posted
Posted

Sorry, are you trying to change your headings or your header? 

The code I gave you was for your header and navigation.

If you want to change heading 1, heading 2 etc. then you can follow this guide: 
https://squarefortytwo.com/squarespace-guides/custom-fonts-on-squarespace-71

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

mjanas10 Level 4

mjanas10

Posted
  • Author
Posted

The header or whatever the AESTHETE text is in the header. If you could explain what it is, if it isn't header, then I'd be immensely grateful. As I say, the menu items in the header changed nicely. 

The second question was how to change the text underneath the products I'm selling - again, no idea what these are classified as? If you could explain, please? 

Ziggy Level 14

Ziggy

Posted
Posted

Can you add a site wide password to your website and share it so I can see what you're asking about?

https://squarefortytwo.com/squarespace-guides/add-a-site-wide-password-to-your-squarespace-website

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

  • Solution
Ziggy Level 14

Ziggy

Posted
  • Solution
Posted

Thanks for that. I've got code for you here, this will update your site title to your custom font: 

.header-title-text {
  font-family: 'Santoshi';
}

If that has helped you, can you mark this post as the solution 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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Ziggy Level 14

Ziggy

Posted
Posted

You can use the Chrome Developer Tools, and then inspect elements and look at the elements.

This list can also be very helpful:

 

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

  • 9 months later...
salisaretreats Level 2

salisaretreats

Posted
Posted

Hello! This was very helpful, the code allowed me to change the header text, but I still need the "login" text to change to my custom font. What would be the code for that? Thanks

Ziggy Level 14

Ziggy

Posted
Posted
3 hours ago, salisaretreats said:

What would be the code for that? Thanks

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Ziggy Level 14

Ziggy

Posted
Posted (edited)

@salisaretreats Add this to Custom CSS: 

.user-accounts-link.loaded .user-accounts-text-link {
    font-family: 'NewtSerif';
}

 

Edited by Ziggy

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!

📈 SEO Space (Referral link)
Ⓜ️ Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
⬛ SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
✨ Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

☕ Did I help? Buy me a coffee?

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources