⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation! To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Very helpful! I have only a basic knowledge of coding and was just having trouble with assigning fonts to paragraphs for a client. Thank you for posting!
Hi thank you so much for the video. I copied and pasted the codes you use and change out the name of the font name to what i named it but its giving me this error "Syntax Error on line...) and then it says that the code i used from you on the line im on is wrong. What am i doing wrong? Thank you
Hey There! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
Nope! You can add site wide CSS or a code block to an individual page/post/product/event. Check out my free CSS training to learn more: insidethesquare.co/learn
Great question! Miscellaneous is a "catch all" that is applied to a ton of different things inside your Squarespace site. Unfortunately, there isn't a quick way to replace them all, but you can use selectors to change individual parts of your site, like summary blog pagination links! Probalby not the answer you were hoping for, but I hope that helps. ☺️
Great question! You'll want to create a media query code to change the size based on device screen size. I have an article on my site with more info and I hope you find it helpful: insidethesquare.co/mobile
If you have permission from Adobe, you should be able to, but check out the official Squarespace support articles for more info: support.squarespace.com/
Hi InsideTheSquare - love your videos! I'm trying to do this but for some reason the codes aren't presenting on my website - is the shortened versions of Heading still H1, H2 etc?
Yup! Nothing about that base code for a text block has changed. I have some tips at insidethesquare.co/code-help but you can also email me a link for some support anytime: support-at-insidethesquare.co To help, i'll need to see your site, so if it isn't live, please password protect it under Settings > Site Availability > Password Protected
Thanks Lori! I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Oh no! That doesn't sound right. If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
A syntax error means there is an incorrect character in your code. Could be a comma, apostrophe, incorrect quotation mark, or even a space in the wrong spot. It should say what line the error is in so you can double check the characters there. If you can’t find the problem, I have some troubleshooting tips at insidethesquare.co/codehelp
Great question! The fonts in your main Mac go by their own selector, and it’s different for folders vs page links and mobile links. As a catch all for desktop, you can use the asterisk CSS trick. Otherwise I’d recommend tracking down that data in my CSS cheat sheet that has all the selectors for Squarespace elements, like a those. 😉 Here is the shortcut/trick - hope it helps! header a {font-family: custom-name}
Nope! CSS changes the style of a site and not the functionality of the program. If you want to manipulate the Squarespace software program itself, you'll need some third party javascript based program. Best of luck with your project!
@@InsideTheSquare Thanks, I'd assumed uploading the font file to SS would automatically put it in the fonts list and so thought I was doing something wrong!
There are over 10+ types of buttons in Squarespace so you'll have to be a little more specific! Check out these teo tutorials for more info: insidethesquare.co/buttons insidethesquare.co/squarespace-tutorials/css-targeting-tricks
@@InsideTheSquare I'm just talking changing the fonts for the primary, secondary, and tertiary button blocks. I've installed custom fonts that I am using for headings and paragraphs, but don't know how to make that same change for buttons. Thanks. I'll check the tutorials to see if it's covered there.
What if you want to use a style already in Squarespace, but just assign it to H4 so it only uses it for H4 text? Do you still have to upload a font file for this to work?
Hi, I also was trying to do this and I found a solution that works; although, I'm not sure if it's the 'right' way to do it, I'm also new to CSS. What I did was upload all the weights of the font I want to use. Let's say I'm using Helvetica Regular, Medium and Bold. I then created three (3) instances of the @font-face code block, naming each font with their respective name and weight, and linking to that specific custom file. Here's what that would look like below. @font-face { font-family: 'Helvetica Regular'; src: url(link regular variant of your custom font); } @font-face { font-family: 'Helvetica Medium'; src: url(link medium variant of your custom font); } @font-face { font-family: 'Helvetica Bold'; src: url(link bold variant of your custom font); } Do this for as many variants as you want. Whenever you want to reference a specific variant, say you want to use Helvetica Regular for H1 and Helvetica Bold for H3, I would simple enter the name I assigned them in the custom heading code as shown below: h1 { font-family: 'Helvetica Regular'; letter-spacing: 0px; line-height: 110%; } h3 { font-family: 'Helvetica Bold'; letter-spacing: 0px; line-height: 110%; } This is why naming your fonts appropriately in the initial "font-family:" line under the "@font-face" section is important. That way you can always reference the name of the font that contains the specific weight or style you want. I'd say give this a try; but please do it carefully. I'm not expert in CSS; this is simply a workaround I found while trying to fix this issue as well. Hope it helps, cheers!
If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
@@InsideTheSquare It was a squarespace bug, I refresh it and it worked. But now I can't change headline buttons fonts (home, about us, etc) what can I do? :(
I'm not familiar with what the personal plan capabilities are at the moment but you should definitely contact the Squarespace support team to find out: support.squarespace.com/
Wow I am the most non computer kinda guy but i did it!! I was able to change it on my website but on mobile it still has the same old font. im guessing i have to purchase a separate license for that?
Hey Hatachi! Not knowing what version you're using means I can't give you a complete answer, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
You are so welcome - I'm happy that my work is helping you with yours!! You can't export a Canva font file, but I do have a list of fonts that are available in both Canva and Squarespace that might help with your project! You can grab a copy at insidethesquare.co/canva
Hey Choon! How strange - font-size should do it so I don't know why that wouldn't work! Check out my troubleshooting tips at insidethesquare.co/code-help and feel free to submit a help request with some more info.
This video was so helpful! I am running into a minor issue. The font I uploaded is a script font. Because I added it to header 3, it's in ALL CAPS, which is making it difficult to style properly. The only way I can capitalize and use lowercase is to add it to my paragraph p(font family), but then it's too much script. Is there a way that I can manipulate heading 3 so that it is not in ALL CAPS?
If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
Hey there, I applied a custom font exactly this way and it worked, everywhere but the store item titles (and yes, they are using Heading fonts, and I installed the custom font for H1, H2, H3, and H4). I looked through Squarespace message boards and found someone who had the same issue, but simply adding "!important" solved it for them. That did not solve the issue for me. Any clue what could be wrong or how I could target store titles? Thanks in advance
Hi, thank you so much for your video! I have a problem though, I tried it with different fonts but every time I try I do not get the font I wanted; what I get instead is a generic font... I copied the exact same code as yours and tried both with .otf and .ttf files and nothing changes 😅 Do you have any idea of where the problem comes from?
Oh, and, is there a way to change the size of a specific text? Not the size of every Heading, etc, but just a short selected text? I watched several videos and read many articles but didn't find that... :/ I would really appreciate your help! ☺
I did - over two years ago!! 😅 It was so outdated that not only have some of the codes changed but Squarespace did too, so I figured an updated tutorial was long overdue 😉
⚠ IMPORTANT CSS UPDATE ⚠ When logging into Squarespace, if you see the word "Website" at the top of your menu, you are using their new internal navigation!
To edit the CSS of your Squarespace website, click on the word "Website" and scroll to the bottom of the list of pages. Here you'll see "Website Tools" - click on that option and select "Custom CSS" to open the CSS panel and add your code here. For more information, watch this tutorial: ruclips.net/video/euJqHXs_L1M/видео.html
Very helpful! I have only a basic knowledge of coding and was just having trouble with assigning fonts to paragraphs for a client. Thank you for posting!
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!
This is so useful and something I have been wondering how to do, and thought it would be too complicated with CSS!
I'm so happy my tutorial was helpful! :)
Can you do a video on how to add multiple custom fonts I wanted to add two more custom fonts to my squarespace website. Thank you so much.
You can add as many fonts as you want; all you need to do is repeat the steps!
Yay! first time coding. Great video
That's awesome - I'm so glad you gave code a try, and that it worked!! 🙌
Amazing as always - thank you so much! x
You’re welcome! Happy to help. 😎
great tutorial for beginners
You’re welcome! Happy I can help all levels of Squarespacers . 😎
WOW ...what a find your channel is....thanks lots
You're so welcome! Happy to help 😁
You're a legend
Haha! Your comment just made my day! 😎
Hi thank you so much for the video. I copied and pasted the codes you use and change out the name of the font name to what i named it but its giving me this error "Syntax Error on line...) and then it says that the code i used from you on the line im on is wrong. What am i doing wrong? Thank you
Hey There! This is a pretty standard code, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
Do you need to have the Business plan option to be able to edit CSS for your squarespace site?
Nope! You can add site wide CSS or a code block to an individual page/post/product/event. Check out my free CSS training to learn more: insidethesquare.co/learn
wow thank you, quick Q, how do you change the font to the title of a product?
Great question! Feel free to submit a code help request here: insidethesquare.co/code-help
thank you so much for the video! is there a way to custom the 'Miscellaneus' font as well?
Great question! Miscellaneous is a "catch all" that is applied to a ton of different things inside your Squarespace site. Unfortunately, there isn't a quick way to replace them all, but you can use selectors to change individual parts of your site, like summary blog pagination links! Probalby not the answer you were hoping for, but I hope that helps. ☺️
This was so helpful
You’re welcome! Happy to help. 😎
Hi Insidesquare! This worked, I set a size, but it's giant on mobile, how can I set a different size using this code block for mobile? Thanks!
Great question! You'll want to create a media query code to change the size based on device screen size. I have an article on my site with more info and I hope you find it helpful: insidethesquare.co/mobile
Thanks Becca, very timely as I'm just about to change all the fonts on my SS site 🙂
Awesome - so happy I could help! 😎
THANK YOU!! I was quite intimidated at first but you spelled it out so simply that I could wrap my head around it (coding dummy alert LOL!)
You are so welcome! 🤩 Your comment just made my day - thank you so much for letting me know!
Hello ! Thx for your tutorial !
We can to add font from adobe font ?
If you have permission from Adobe, you should be able to, but check out the official Squarespace support articles for more info: support.squarespace.com/
@@InsideTheSquare thank you
Hi InsideTheSquare - love your videos! I'm trying to do this but for some reason the codes aren't presenting on my website - is the shortened versions of Heading still H1, H2 etc?
Yup! Nothing about that base code for a text block has changed. I have some tips at insidethesquare.co/code-help but you can also email me a link for some support anytime: support-at-insidethesquare.co To help, i'll need to see your site, so if it isn't live, please password protect it under Settings > Site Availability > Password Protected
This was a great tutorial! Thank you! I am looking to change the "Miscellaneous" font. Is there a simple CSS code for that? Thanks!
Thanks Lori! I am not quite sure what you are trying to create but I would love to help! Feel free to submit a code help request with more info here: insidethesquare.co/code-help
This helped me so much, but my font is only showing uppercase letters?
Oh no! That doesn't sound right. If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
Can I please ask - if I want to apply a preinstalled or custom font to just one block, how does the code look for that? Many thanks.
You can isolate one text block using its block id. Here is a tutorial with more info: insidethesquare.co/squarespace-tutorials/css-targeting-tricks
@@InsideTheSquare Many thanks x
Hi I'm running into issues where it say Snytax error. What am I doing wrong
A syntax error means there is an incorrect character in your code. Could be a comma, apostrophe, incorrect quotation mark, or even a space in the wrong spot. It should say what line the error is in so you can double check the characters there. If you can’t find the problem, I have some troubleshooting tips at insidethesquare.co/codehelp
awesome tutorial, but how do I change navigation text font? :)
Great question! The fonts in your main Mac go by their own selector, and it’s different for folders vs page links and mobile links. As a catch all for desktop, you can use the asterisk CSS trick. Otherwise I’d recommend tracking down that data in my CSS cheat sheet that has all the selectors for Squarespace elements, like a those. 😉 Here is the shortcut/trick - hope it helps!
header a {font-family: custom-name}
So is it not possible to install the font so it shows up in the site styles list of fonts?
Nope! CSS changes the style of a site and not the functionality of the program. If you want to manipulate the Squarespace software program itself, you'll need some third party javascript based program. Best of luck with your project!
@@InsideTheSquare Thanks, I'd assumed uploading the font file to SS would automatically put it in the fonts list and so thought I was doing something wrong!
What's the CSS for changing the button fonts?
There are over 10+ types of buttons in Squarespace so you'll have to be a little more specific! Check out these teo tutorials for more info:
insidethesquare.co/buttons
insidethesquare.co/squarespace-tutorials/css-targeting-tricks
@@InsideTheSquare I'm just talking changing the fonts for the primary, secondary, and tertiary button blocks. I've installed custom fonts that I am using for headings and paragraphs, but don't know how to make that same change for buttons. Thanks. I'll check the tutorials to see if it's covered there.
Hi how do I assign a font family to my menu font ?
You need to use the right selector and I can help! Are you wanting to change your mobile menu, main header navigation menu, or a menu block?
What if you want to use a style already in Squarespace, but just assign it to H4 so it only uses it for H4 text? Do you still have to upload a font file for this to work?
If it's already installed on your site - manually or with your site style menu - you can use the font family name for any selector like your H4.
Awesome video! Thank you! what if I have multiple weights of the font? (e.g., H2 is medium, H3 is semibold) How can I make those inline distinctions?
Feel free to submit a code help request with more info here: insidethesquare.co/code-help
Hi, I also was trying to do this and I found a solution that works; although, I'm not sure if it's the 'right' way to do it, I'm also new to CSS.
What I did was upload all the weights of the font I want to use. Let's say I'm using Helvetica Regular, Medium and Bold. I then created three (3) instances of the @font-face code block, naming each font with their respective name and weight, and linking to that specific custom file. Here's what that would look like below.
@font-face {
font-family: 'Helvetica Regular';
src: url(link regular variant of your custom font);
}
@font-face {
font-family: 'Helvetica Medium';
src: url(link medium variant of your custom font);
}
@font-face {
font-family: 'Helvetica Bold';
src: url(link bold variant of your custom font);
}
Do this for as many variants as you want.
Whenever you want to reference a specific variant, say you want to use Helvetica Regular for H1 and Helvetica Bold for H3, I would simple enter the name I assigned them in the custom heading code as shown below:
h1 {
font-family: 'Helvetica Regular';
letter-spacing: 0px;
line-height: 110%;
}
h3 {
font-family: 'Helvetica Bold';
letter-spacing: 0px;
line-height: 110%;
}
This is why naming your fonts appropriately in the initial "font-family:" line under the "@font-face" section is important. That way you can always reference the name of the font that contains the specific weight or style you want.
I'd say give this a try; but please do it carefully. I'm not expert in CSS; this is simply a workaround I found while trying to fix this issue as well.
Hope it helps, cheers!
@@thecesarj_this is exactly what I needed. Thank you!
I've installed the fonts, but a different font is appearing than the one I uploaded. I have no idea what's going on.
If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
Code window says " missing closing `}` " and can't fix it :(
Think of these brackets like bookends. Go back through your code and make sure that you have a } for every {
@@InsideTheSquare It was a squarespace bug, I refresh it and it worked. But now I can't change headline buttons fonts (home, about us, etc) what can I do? :(
Hey, just a quick Q: you can't do this with the personal plan, can you? It has to have Custom CSS included?
I'm not familiar with what the personal plan capabilities are at the moment but you should definitely contact the Squarespace support team to find out: support.squarespace.com/
Thank you
You're so welcome! Glad my work can help you with yours!❤️
Wow I am the most non computer kinda guy but i did it!! I was able to change it on my website but on mobile it still has the same old font. im guessing i have to purchase a separate license for that?
Hey Hatachi! Not knowing what version you're using means I can't give you a complete answer, so I'd need to look at your code to see why it wouldn't respond. Feel free to submit a code help request here: insidethesquare.co/code-help
when I add the source link it turns grey because of the two "//"
As long as you start your URL with https: before the two lines, they wont register as a note.
Hi, I start with https: before the two lines, and it still registers it as a note, don't know what to do...@@InsideTheSquare
I love your channel so much, thanks!!! Quick Q, how do you save a font file? Let's say, I use a font on Canva, how can I save it and upload to SS?
You are so welcome - I'm happy that my work is helping you with yours!! You can't export a Canva font file, but I do have a list of fonts that are available in both Canva and Squarespace that might help with your project! You can grab a copy at insidethesquare.co/canva
would like to increase the font size of a font family, i tried adding the font-size at the end but no changes!
Hey Choon! How strange - font-size should do it so I don't know why that wouldn't work! Check out my troubleshooting tips at insidethesquare.co/code-help and feel free to submit a help request with some more info.
This video was so helpful! I am running into a minor issue. The font I uploaded is a script font. Because I added it to header 3, it's in ALL CAPS, which is making it difficult to style properly. The only way I can capitalize and use lowercase is to add it to my paragraph p(font family), but then it's too much script. Is there a way that I can manipulate heading 3 so that it is not in ALL CAPS?
If this feature isn’t working the way mine is in the video, you definitely need to contact the official Squarespace support team. You can find more info on how to reach them at support.squarespace.com
@@InsideTheSquare Thank you! I actually figured it out a few hours after posting the question.
@@ncc_light How did you figure this out? I am having the same issue :) Thank you!
Hey there, I applied a custom font exactly this way and it worked, everywhere but the store item titles (and yes, they are using Heading fonts, and I installed the custom font for H1, H2, H3, and H4). I looked through Squarespace message boards and found someone who had the same issue, but simply adding "!important" solved it for them. That did not solve the issue for me. Any clue what could be wrong or how I could target store titles? Thanks in advance
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
How do I change the font on one page that already exists in Squarespace (Helvetica Neue)?
There are two ways to add code to a single page - check out this tutorial for more help: insidethesquare.co/singlepage
hi there, i did this. but it looks different on mobile. any ideas why?
That doesn’t sound right! I would love to help - send me more info at insidethesquare.co/code-help and I’ll hop into your source code and take a look.
@@InsideTheSquare hey i just sent you through an email.
Hi, thank you so much for your video! I have a problem though, I tried it with different fonts but every time I try I do not get the font I wanted; what I get instead is a generic font... I copied the exact same code as yours and tried both with .otf and .ttf files and nothing changes 😅 Do you have any idea of where the problem comes from?
Oh, and, is there a way to change the size of a specific text? Not the size of every Heading, etc, but just a short selected text? I watched several videos and read many articles but didn't find that... :/
I would really appreciate your help! ☺
Hmmm, that doesn't sound right. Feel free to submit a code help request here: insidethesquare.co/code-help
You already made a video about custom fonts earlier
I did - over two years ago!! 😅 It was so outdated that not only have some of the codes changed but Squarespace did too, so I figured an updated tutorial was long overdue 😉
🙄