Uplevel Your Website Design With Custom Fonts in Squarespace 7.1

Blog

Apr 13

I love that anyone can get a great-looking site up quickly without any custom code. There are tons of great fonts within the Squarespace platform that I have used on high-end designs. However, sometimes a custom font will really uplevel the entire site with just a new font.

Some of my favorite places to purchase unique fonts that will stand out on a website are CreativeMarket.com or Envato Elements

Here is my CSS code for adding custom fonts to Squarespace 7.1. You can also watch the video tutorial as well.

Custom Fonts in Squarespace 7.1:

Copy the following code into the custom CSS section of your website.
Make sure you have a licensed font, meaning you have purchased the license to use it.
Upload your font to the custom files folder
Delete text within the parenthesis that starts with “unique-url-for-your-file”
Insert cursor and your custom font should show up in drop down or click on the file to make it insert into the code
Replace ‘font-name’ with the name of your font (it does not need to be exact)
Replace the ‘font-name’ in your h1, h2 and h3 sections with your new font name

“//Custom Fonts Squarespace//

@font-face { font-family: ‘font-name’; src: url(unique-url-for-your-file: click the file in your custom file folder to get this url) }

//Heading One Font//
h1 { font-family: ‘font-name’, alternative-web-safe-font; }

//Heading Two Font//
h2 { font-family: ‘font-name’, alternative-web-safe-font; }

//Heading Three Font//
h3 { font-family: ‘font-name’, alternative-web-safe-font; }

//Normal Font//
p { font-family: ‘font-name’, alternative-web-safe-font; }

//Quote Font//
.sqs-block-quote blockquote { font-family: ‘font-name’, alternative-web-safe-font; }

//Quote Source Font*//
.sqs-block-quote .source { font-family: ‘font-name’, alternative-web-safe-font; }”