How to Use a Custom Font on Your Squarespace Site in 3 Simple Steps
Fonts and colours are integral to establishing and distinguishing your brand. So many solo-preneurs and entrepreneurs spend either hours pouring over options or hundreds - thousands for someone to do it for them. It’s the same old song. You spend all this time, money, and effort perfecting the “right” font, and then BOOM Squarespace, just doesn’t give you the option to use it.
Style Editor is amazing, with incredible options and “font packs” that compliment your design choices. However, you don’t always get the option for that perfection re-incarnate in the form of a font, to fully be displayed and utilized. Don’t worry though, you can still use that killer font on Squarespace! You just may have to roll up your sleeves and release the CSS Machine that you didn’t realize you were!
I was updating this very website when I just didn’t LOVE the look … mainly do to the lackluster headers. I looked back through my trusty files and folders, filled with old templates and how-to’s by some of the best designers online! I’m a sucker for organizing all my most trusted resources… it’s paid off too many times to count!
I had recently rebranded my own business overnight! Yes — OVERNIGHT! Crazy, right? Nope! You can totally do that with my online course Squarespace 101. But that’s a whole other bottle of prosecco ….
While I was redesigning, I took a few extra steps and was beyond thankful for the results! One of the great things about Squarespace is that you have three heading styles (standard, though you can always add more), and a body and quote text styles .\
I’ve outlined the aforementioned styles here below:
Now, head on over to DESIGN >> CUSTOM CSS.
01: UPLOAD YOUR FONT
You merely scroll down to just below the CSS window block and click 'Manage Custom Files'. Then, you select the font file you want to upload from your computer. You can get files easily online for free, you can purchase some amazing fonts from artists, or you can make your own (here— ) This past week I actually bought an amazing font bundle from Wilde Mae Studio. After playing around in Illustrator and XD, I was really loving the JUDY font which is the font I’m using in this blog post.
Scroll down to 'Manage Custom Files'
And upload the font file from your computer.
02: Show Squarespace what to do
Now, here is where we bust out the CSS guns. Whenever I utilize CSS, I like to give each section a quick little title, that way if I need to check anything, I know what I’m looking for.
So, here we go…
I would add ... //ADDING JULES FONT// then the base CSS underneath...
@font-face {
font-family: 'NAME';
src: url('FONT URL'); }Now, we need to replace 'NAME' with the name I want Squarespace to recognize the font by and 'FONT URL' by the URL where the font can be found (don’t worry, Squarespace helps you out here. So mine will just be JULES.
@font-face {
font-family: 'JULES';
src: url('FONT URL'); }Now, here we need to find the URL of your perfect font. Just remove the info between URL, then with your cursor flashing between the two ' ', simply click back on 'Manage Custom Files', click on your font file in the list of uploaded files and there you go! The URL has been automatically inserted into your site.
The basic CSS...
...then give the font a name and add in the URL.
I cannot stress enough the importance of making sure your cursor is in the right place before you click on your font's name ] in 'Manage Custom Files' ... the URL will end up wherever your cursor is. You don’t want to accidentally insert the URL elsewhere and disrupt other CSS from a different section of your site.
03: Assign your Font to your Header (or other text style)
Finally, having essentially communicated with Squarespace that this is where the text is, it’s time to show it where we will utilize it!
You need to decide which heading or text style you'd like to use the custom font for. Most people will be doing this for their headers, for me I chose it as Header 4, as I don’t typically use header 4 and this gave me the option of having an alternative main header that I could use for more special areas of my site. No matter where you assign the font, the process is exactly the same, just replace 'h4' with whatever you'd like.
The code you’ll need is:
h1 {font-family: 'NAME';}in this case:
h1 {font-family: 'JULES';}This means, you’re telling Squarespace you want to use (in my case) Jules for my H4.
Having assigned the font to H4, you can now adjust the size of your font and the spacing. To do this, we’ll have to add a little more CSS.
font-size:55px;
letter-spacing:'2px';
}
There are practically a limitless amount of changes you can make to text using CSS. You can find more of them at W3Schools Text CSS page. They are an amazing resource that I’ve used many times!
Having assigned the font to H1, you can see the 'H4 Jules Script ' has changed the font without you having to even refresh your page. All H4 font on your site will change automatically as well.
I hope you enjoyed this tutorial and please comment below if you’ve tried it out for yourself!
