Custom Font for Header

mjanas10 · September 11

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

Can you share your website URL?

mjanas10 · September 11

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

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

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

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

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

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

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

mjanas10 · September 11

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

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

Thanks Ziggy,

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

Ziggy · September 12

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

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

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

This list can also be very helpful:

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

Create an account or sign in to comment

News

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources