How to add a custom font to your website
One of my most asked questions: how to add a custom font to your Squarespace site.
Do you have a custom font you purchased for your brand and want to implement it on your website? Here’s a quick 3 step process on how to add it right now! This does involve using some coding - but don’t freak out! I promise it’s super simple.
More visual? Watch this video and copy and paste the codes below!
Wanna read about it? Read the post below!
1. Upload your font file
Once you’ve purchased + downloaded your custom font file, put it somewhere easily accessible (desktop?). The file will have the name .otf or .tff - either will do!
My favorite place to find beautiful custom fonts is Creative Market! You can usually find one that is under $20. Just make sure you purchase the right license to be able to use it on your website!
In the gray panel on the left side of your website, go to the DESIGN tab and scroll down and click on CUSTOM CSS.
At the bottom, click on MANAGE CUSTOM FILES.
Drag and drop or click the arrow to upload your font file. STEP ONE: DONE!
2. Add your font to your website
Copy and paste this code into the CSS window:
@font-face { font-family: 'FONT-NAME-HERE'; src: url('URL-GOES-HERE'); }
Where it reads ‘FONT-NAME-HERE’ put the name of your font file. If your font file is named “Chelsita-Regular.OTF" put the font name as ‘Chelsita-Regular’. MAKE SURE the name stays inside the single quotes and the semi colon.
Delete ‘URL-GOES-HERE’ but keep your cursor in between the single quotes. Click the MANAGE CUSTOM FONTS FILES button at the bottom and click on your font. It will automatically add the URL for the font in between your single quote marks.
STEP TWO: DONE! Just one more!
3. Target the heading style you want in your custom font
Squarespace has 3 different heading styles you can choose that all have different styles associated with them - h1, h2 or h3. You can choose which heading(s) style you want your new font to be in. Let’s use h1 as an example.
Copy and paste this into your CSS window under neath the other code:
h1 { font-family: FONT-NAME-HERE !important; }
Where it reads FONT-NAME-HERE put the name of your font file that you put in your previous code (no need for the single quotes here!).
If you want it to be h2 or h3, just switch out the number before the {
Then, you can change the color, size, letter spacing, etc. just like normal in your SITE STYLES. You will see across your site that everywhere you have that heading style chosen you will see your new custom font!
Targeting the headline in an image block in 7.0
If you are trying to change the headline in an image block (poster, card, collage, overlap or stack) you will need to target that specific style instead of H1, H2 or H3.
Use the code below and switch out the word “collage” for whichever type of image block you are using (poster, card, collage, overlap or stack):
.sqs-block-image .design-layout-COLLAGE .image-title p {
font-family: FONT-NAME-HERE !important; }
If you want it to just be one word in the headline, use the same code below in the next section and just use the “.sqs-block-image .design-layout-COLLAGE .image-title p” instead of h1.
BONUS!
To make things a little more complicated, you can target using your custom font even further.
If you want to have your custom font be in just one word, or used sparingly across your website - here’s how!
Instead of choosing h1, h2 or h3 you can choose for when the font is in BOLD or ITALIC for it to change.
Copy the below code:
h1
{ b, strong
{ font-family: FONT-NAME-HERE !important;
font-style: normal;
font-weight: 500;
font-size: 15px;
text-transform: none;
letter-spacing: 0em;
color: #000000;
line-height: 1.4em; } }
if you want it to change when BOLD the code is b, strong. If you want it to change when italic, replace with em.
Since every font is different, you may want to manually change the settings for that specific instance of the font. The size, weight, letter spacing, color, etc.
I hope this helped and let me know if you have any questions.
Happy Website-ing!
