Custom fonts in 7.1?

Site URL: https://smilodon-ocelot-my5f.squarespace.com/

Hi,

How do I change my only font, Montserrat, to a custom font?

I have a link here to the one I want, Gotham: https://gist.github.com/mfd/f3d96ec7f0e8f034cc22ea73b3797b59

OR I can upload Gotham font from my desktop.

I don't know what to do from there or where to insert it to make it replace all uses of Montserrat in the site?

And will Gotham show up on different browsers?

password: trythis

Upload font to your site, then use this CSS to apply custom font

@font-face {
	font-family: tuan;
	src: url(paste font file url here);
}
h1, h2, h3, h4 {
	font-family: tuan;
}
p {
	font-family: tuan;
}

Do similar for other items.

How to upload file: https://support.squarespace.com/hc/en-us/articles/205813928-Uploading-and-managing-files

Thanks!

Although it doesn't seem to have changed ALL the fonts in the site?

Navigation and some links and product titles etc are still in the old font.

to change all elements, use

* {
	font-family: tuan !important
}

Great, works!

Doesn't seem to work now due to a CORS error  - the font file is hosted on static<n>.squarespace.com, and being loaded by yoursite.com. Without an Access-Control-Allow-Origin header, the font isn't loaded.

Seems to be a Squarespace bug.

Okay, so the answer is to not upload the file using the file link method that tuanphan mentioned, but to use the button at the bottom of the custom CSS editor. Once the font is uploaded, clicking on it will insert the correct URL into your custom CSS.

Hi again @tuanphan - hoping you can help me again? I replied to this post because I am changing fonts on my website to custom fonts. 

I have gone through and isolated the code to change almost all the appearances of fonts (product details, navigation, breadcrumbs etc), but there is one element that has me totally stumped!

Here is a link to the shop page  https://snail-groundhog-6tzy.squarespace.com/shop (do you need the password?) - I would like to change the title of the thumbnail product to my custom font... I cannot work out how to isolate that particular label! I've tried lots of things but nothing has worked. 

I usually enter it in custom css as something like .products-list {font-family: the-lodge;} but I can't work out the class for this heading. Are you able to help again? Thanks sooo much!!

7 hours ago, JessBailey said:

Hi again @tuanphan - hoping you can help me again? I replied to this post because I am changing fonts on my website to custom fonts. 

I have gone through and isolated the code to change almost all the appearances of fonts (product details, navigation, breadcrumbs etc), but there is one element that has me totally stumped!

Here is a link to the shop page  https://snail-groundhog-6tzy.squarespace.com/shop (do you need the password?) - I would like to change the title of the thumbnail product to my custom font... I cannot work out how to isolate that particular label! I've tried lots of things but nothing has worked. 

I usually enter it in custom css as something like .products-list {font-family: the-lodge;} but I can't work out the class for this heading. Are you able to help again? Thanks sooo much!!

What is access password?

Try adding to Home > Design > Custom CSS

* {
	font-family: the-lodge !important;
}

This is awesome thank you! Do you know how I can do this with 2 different custom fonts on my site? I tried to add the snippet for both and in the preview, the second font I added overrode the previous one.

On 10/29/2021 at 2:23 AM, picklespickles said:

This is awesome thank you! Do you know how I can do this with 2 different custom fonts on my site? I tried to add the snippet for both and in the preview, the second font I added overrode the previous one.

Which elements will run custom font 1, which elements font 2?