Custom Font for Header

mjanas10 · September 11, 2023

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

Ziggy · September 11, 2023

Can you share your website URL?

mjanas10 · September 11, 2023

The site is totally not ready so I'd rather not share it. It's a template with a standard header at the top. Nothing exceptional about it.

mjanas10 · September 11, 2023

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 · September 11, 2023

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.

mjanas10 · September 11, 2023

Okay, great! Thanks
It changed the font for the menu items.. however the header AESTHETE is still as it was.. please have a look: https://rhino-oarfish-wrln.squarespace.com/

mjanas10 · September 11, 2023

Also, I noticed that my product subtitle or Subscription subtitle have not updated to my custom font. How do I change that as well, please?

Ziggy · September 11, 2023

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

mjanas10 · September 11, 2023

No, I want to change the "header". Did I say heading?

mjanas10 · September 11, 2023

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 · September 11, 2023

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

mjanas10 · September 11, 2023

Thanks Ziggy,

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

Ziggy · September 12, 2023

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!

mjanas10 · September 12, 2023

Hi Ziggy,

You've been extremely helpful! Thanks!

Where can I find out more about all those tags such as ".header-title-text" etc?

Thanks

Ziggy · September 12, 2023

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

This list can also be very helpful:

salisaretreats · June 28

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 · June 28

3 hours ago, salisaretreats said:

What would be the code for that? Thanks

Can you share your website URL?

salisaretreats · June 29

https://www.salisaretreats.com/

Ziggy · July 1

@salisaretreats Add this to Custom CSS:

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

Edited July 1 by Ziggy

Custom Font for Header

Recommended Posts

Link to comment

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

mjanas10

Ziggy

Ziggy

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Link to comment

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources