mportch Posted April 8, 2020 Share Posted April 8, 2020 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
tuanphan Posted April 8, 2020 Share Posted April 8, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
mportch Posted April 8, 2020 Author Share Posted April 8, 2020 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. emalu 1 Link to comment
tuanphan Posted April 8, 2020 Share Posted April 8, 2020 to change all elements, use * { font-family: tuan !important } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
MattB2 Posted August 22, 2020 Share Posted August 22, 2020 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
MattB2 Posted August 22, 2020 Share Posted August 22, 2020 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
JessBailey Posted November 22, 2020 Share Posted November 22, 2020 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
tuanphan Posted November 22, 2020 Share Posted November 22, 2020 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
picklespickles Posted October 28, 2021 Share Posted October 28, 2021 (edited) 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. Edited October 28, 2021 by picklespickles typo Link to comment
tuanphan Posted October 31, 2021 Share Posted October 31, 2021 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 How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment