Jump to content

Custom fonts in 7.1?

Recommended Posts

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

 

Link to comment

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 months later...

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.

Link to comment

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.

Link to comment
  • 2 months later...

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!!

Link to comment
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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 11 months later...
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.