Add Custom Fonts To Squarespace Website

FontCode

Nov 11

Watch the Video

Check out the YouTube video below 👇

Here’s the code from the video👇

@font-face {
    font-family: (Name of Font);
  src: url( );
  }

// Site Title //
.header-title-text a {
  font-family: YOURNAME !important;
}

// Site Navigation //
.header-nav-item a {
  font-family: YOURNAME !important;
}

// Button //
.header-actions-action .btn {
  font-family: YOURNAME !important;
}

// Announcement Bar //
.sqs-announcement-bar-url a {
  font-family: YOURNAME !important;
}

h1 {
font-family: 'YOURFONT';
}

h2 {
font-family: 'YOURFONT';
}

h3 {
font-family: 'YOURFONT';
}

h4 {
font-family: 'YOURFONT';
}

.sqsrte-large {
font-family: 'YOURFONT';
}

p {
font-family: 'YOURFONT';
}

.sqsrte-small {
font-family: 'YOURFONT';
}

Here’s how to use it:

Upload your font file to the “Custom Files” inside of the “Custom CSS” panel in the “Website Tools” section
Add the code above to the “Custom CSS” section.
In the “url” under the first “Font-Family”, put the link of the font file in between the parenthesis. Do this by clicking “Custom Files” and them click the font that you uploaded

Change the “Name of Font” by the first “Font-Family'“ in the CSS code
Go through all the sections and replace the “YOURFONT” & “YOURNAME” with the name you put in the previous step.
Once you change all those to the name you named the font, the changes should start appearing on the website.
Once you’re done with the code, click “Save”

Your Designer

I’m Dylan, a Squarespace website designer. I’ve created amazing websites for multiple clients across different industries from E-Commerce sites to Real Estate and Insurance brokers. If you’re looking for a website and want to discuss a potential project, email me at dylan@highrlabs.com. You can also schedule a free 30-minute consultation call