Jump to content

How do you add another header font?

Go to solution Solved by melody495,

Recommended Posts

Hi!

I have been trying to update my website and would like to be able to add another font to the headers. The subheading in the image below is great for small sentences but I would like the option of using another font (Montserrat) for longer sentences.

Could anyone please help me with this?

Thanks

Kathryn

Screenshot (150).png

Link to comment

Hi @kathryneade please can you share a link to your website so the community can help you easier?

Assuming Montserrat is not one of the 2 fonts you've set for your website. Have you uploaded the custom font to you Custom CSS already?

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Customisation Specialist | You Dream it, I'll Make it happen | w: melodylee.tech e: melody@melodylee.tech 📍 UK based. The great thing about the internet, we can work together from anywhere. BOOK YOUR DISCOVERY CALL

#neverstoplearning | Did I help?  I like coffee 😊 

Link to comment
On 11/27/2023 at 5:17 PM, melody495 said:

Hi @kathryneade please can you share a link to your website so the community can help you easier?

Assuming Montserrat is not one of the 2 fonts you've set for your website. Have you uploaded the custom font to you Custom CSS already?

Hi Melody!

Thanks for helping! Here is the link to my website:

https://www.kathryneade.com/strategy-development

I haven't uploaded the custom CSS yet. I'm not sure how to do it and was worried I'd damage the site if I tried.

Thanks,

Kathryn

Link to comment
51 minutes ago, kathryneade said:

I haven't uploaded the custom CSS yet. I'm not sure how to do it and was worried I'd damage the site if I tried.

Hi, you can save a copy of what's in your Custom CSS before you start. Then if you did mess it up, you have a copy of the working file to go back to.

For custom font, you will need to find the font file you need, download it. and then follow these instructions for uploading a custom font file to Custom CSS. I find this guide quite clear to follow.

Ones you have done that, let me know and we can move to the next step.

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Customisation Specialist | You Dream it, I'll Make it happen | w: melodylee.tech e: melody@melodylee.tech 📍 UK based. The great thing about the internet, we can work together from anywhere. BOOK YOUR DISCOVERY CALL

#neverstoplearning | Did I help?  I like coffee 😊 

Link to comment
22 hours ago, melody495 said:

Hi, you can save a copy of what's in your Custom CSS before you start. Then if you did mess it up, you have a copy of the working file to go back to.

For custom font, you will need to find the font file you need, download it. and then follow these instructions for uploading a custom font file to Custom CSS. I find this guide quite clear to follow.

Ones you have done that, let me know and we can move to the next step.

Ah! I misunderstood what you had said previously!

I would like to know if it's possible to add an extra font, on top of the two already in place?

Thanks,

Kathryn

Link to comment
13 minutes ago, kathryneade said:

I would like to know if it's possible to add an extra font, on top of the two already in place?

You can. You achieve this by adding code to your Custom CSS. There are step-by-step instructions in the link I have provided above. 

First find and download the font file you need, then follow the link.

I cannot do those steps for you as you will need to upload font file and insert the font file you've uploaded, so you will need to follow the link.

If you need help with the above, drop me an email.

Edited by melody495

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Customisation Specialist | You Dream it, I'll Make it happen | w: melodylee.tech e: melody@melodylee.tech 📍 UK based. The great thing about the internet, we can work together from anywhere. BOOK YOUR DISCOVERY CALL

#neverstoplearning | Did I help?  I like coffee 😊 

Link to comment

It looks like your site has got your H2, H3 and H4 headings set to the script font only when you make that text bold. When not bold, it should be displaying Montserrat, like I can see a little further down the page with a H3.

Have you tried typing a heading and changing the select to regular text / not bold?

If this helped you, please like or mark my solution as answer so others can scroll to it quickly 👆

Cass Aggett is a Squarespace website designer for go-getting women – no matter what stage of business.

WEBSITEINSTAGRAM

 

Link to comment
On 12/3/2023 at 3:28 PM, melody495 said:

You can. You achieve this by adding code to your Custom CSS. There are step-by-step instructions in the link I have provided above. 

First find and download the font file you need, then follow the link.

I cannot do those steps for you as you will need to upload font file and insert the font file you've uploaded, so you will need to follow the link.

If you need help with the above, drop me an email.

Hi! 

Yes, sorry, my bad!

I've been playing around with the code to try and get the font to show up as a header 4, but nothing has seemed to work. 

So far I've tried changing the file type from ttf to otf, and have added !important to it.

Here's the code I have used:

@font-face {
    font-family: caveat;
    src: url(https://static1.squarespace.com/static/610904e5be045268ca277f89/t/656e552e79c9af4447f15c44/1701729584274/Caveat-Regular.otf);
} 
h4 {
    font-family: 'caveat' !important;
}

Are there any other steps to get the heading font to show up?

Thank you for your patience!

Kathryn

Link to comment
4 minutes ago, kathryneade said:

Here's the code I have used:

@font-face {
    font-family: caveat;
    src: url(https://static1.squarespace.com/static/610904e5be045268ca277f89/t/656e552e79c9af4447f15c44/1701729584274/Caveat-Regular.otf);
} 
h4 {
    font-family: 'caveat' !important;
}

Hi @kathryneade, just need to change one small thing!

Change your code from

h4 {
    font-family: 'caveat' !important;
}

to

h4 {
    font-family: caveat !important;
}

This is because in the above code where you loaded the font file, the name you've given this font-family is caveat with single quotes. Need to use the same name. Subtle difference, but a difference nonetheless.

 

This is what it looks like when I tested changing the second line to caveat, just to confirm you have uploaded your font file correctly.

image.thumb.png.285bd4454f53d85967cba227a7c43429.png

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Customisation Specialist | You Dream it, I'll Make it happen | w: melodylee.tech e: melody@melodylee.tech 📍 UK based. The great thing about the internet, we can work together from anywhere. BOOK YOUR DISCOVERY CALL

#neverstoplearning | Did I help?  I like coffee 😊 

Link to comment
12 hours ago, melody495 said:

Hi @kathryneade, just need to change one small thing!

Change your code from

h4 {
    font-family: 'caveat' !important;
}

to

h4 {
    font-family: caveat !important;
}

This is because in the above code where you loaded the font file, the name you've given this font-family is caveat with single quotes. Need to use the same name. Subtle difference, but a difference nonetheless.

 

This is what it looks like when I tested changing the second line to caveat, just to confirm you have uploaded your font file correctly.

image.thumb.png.285bd4454f53d85967cba227a7c43429.png

 

Thank you!

I've changed it now but can't seem to find h4 in the font options. Can you help me find it please?

I've attached an image to show you what I mean.

Thanks,

Kathryn

Screenshot (151).png

Link to comment
  • Solution
1 minute ago, kathryneade said:

I've changed it now but can't seem to find h4 in the font options. Can you help me find it please?

Hi, it looks like you are using a template that doesn't allow you to select h4. But that is not the issue. With custom font, you won't be able to use the native SquareSpace select in a Text Block.

To use your custom font in the editor, please add a Code Block, then copy and paste the below code

<h4 style="font-family: caveat">Write what you want here</h4>

 

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Customisation Specialist | You Dream it, I'll Make it happen | w: melodylee.tech e: melody@melodylee.tech 📍 UK based. The great thing about the internet, we can work together from anywhere. BOOK YOUR DISCOVERY CALL

#neverstoplearning | Did I help?  I like coffee 😊 

Link to comment
57 minutes ago, melody495 said:

Hi, it looks like you are using a template that doesn't allow you to select h4. But that is not the issue. With custom font, you won't be able to use the native SquareSpace select in a Text Block.

To use your custom font in the editor, please add a Code Block, then copy and paste the below code

<h4 style="font-family: caveat">Write what you want here</h4>

 

Thank you so much @melody495!! That has sorted it perfectly!

Thanks,

Kathryn

Link to comment
4 minutes ago, kathryneade said:

Thank you so much @melody495!! That has sorted it perfectly!

Thanks,

Kathryn

You're welcome 🙂 glad it's working for you

-------- > 👆 <---------- Please quote or @ me when replying, or I won't get a notification 

Melody | Customisation Specialist | You Dream it, I'll Make it happen | w: melodylee.tech e: melody@melodylee.tech 📍 UK based. The great thing about the internet, we can work together from anywhere. BOOK YOUR DISCOVERY CALL

#neverstoplearning | Did I help?  I like 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.