Most Used Custom Codes in Squarespace

I love Squarespace because you can make a beautiful site without code, but these are the 3 codes I use ALL THE TIME to up-level and personalize my client’s websites.


squarespace custom code font

Watch this starting at 3:39

Head over to the custom CSS section of your Squarespace dashboard and then upload your font and add this code!

@font-face {
font-family: NEWYORK;
src: url(;
h3 {font-family: 'NEWYORK';}

2. Vertical Line

Watch this first.

Add code block with this <div class=”vl”></div>

Go to Custom CSS and add this code:

vl { background: #000000; width: 1px; height: 200px; margin: 0 auto; }

3. Overlap Icon

Watch this video.

Find the block code using the “Squarespace Collection/ Block Identifier” plugin for Chrome and then add that bit of code with margin-top after it and if you want it further up increase from 30% to 90% for example!

#block-yui_3_17_2_1_1618979555098_10962 {margin-top:-30%}

Get my favorite codes

HOW TO CUSTOMIZE YOUR SQUARESPACE WEBSITE →  with easy to implement codes!

⁠I’m going to teach you exactly how and where to add customizations to your website so you can WOW your ideal client and have a website that STANDS OUT!

Leave a Reply

Your email address will not be published. Required fields are marked *

with their Showit or Squarespace website with intentional website strategy so they can book more clients and make more money doing what they love!

Helping creative entrepreneurs


Read The Blog

Privacy policy

back to top

How to design a website in a week that converts!  Learn how to DIY your website in this Free Masterclass!

Let's connect!

register now