How do you add another header font?

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

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?

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

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.

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

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.

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?

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

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.

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.

 

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

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

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