How to Add Custom Fonts to a Squarespace Website
Squarespace provides many design tools including many built in fonts, however, not all fonts are available. If your company branding uses a custom or other downloaded font, Squarespace allows you to upload it manually plus add additional custom settings.
Follow the simple and easy steps below:
What font file is needed?
Once you have downloaded a font, some files you might receive could include .otf, .ttf, and .woff/.woff2.
These font files can be used with your Squarespace website, and for optimal web compatibility, it’s recommended to upload all three file types.
Add fonts to your website:
1. Select Design > Custom CSS
2. Embed the follow code:
@font-face { font-family: 'font name'; src: url(''), url(''), url(''); }
Replace ‘font name’ with the name of your font
3. Select ‘Manage Custom Files’ then ‘Add Image or Fonts’ and upload all three file formats (otf., .ttf, & .woff/woff2)
4. Update your font coding:
Click to place your cursor in between the quotations in the above code.
Select your web font file in the custom files window. The URL path will automatically fill where your cursor is located.
Repeat this again with the remaining two formats.
5. Assign your typefaces
Use the code below to assign your uploaded font to the heading style.
1. Past the code below in Custom CSS
2. Replace ‘font name’ with the same name used in the code mentioned in step 2. This will tell Squarespace how you want your font to be used on the website.
h1 { font-family: 'font name';}
h2 { font-family: 'font name';}
h3 { font-family: 'font name';}
p { font-family: 'font name';}
h1= largest heading font
h2= second largest heading font
h3= smallest heading font
p= body text
6. OPTIONAL: Additional customization
If you’d like to customize your typeface further, use the example code below to expand your options.
h1 { font-family: 'font name';
letter-spacing: ‘2px’;
font-size: 55px;
text shadow: 1px 1px #eee
}
Important: Make sure that the font license allows for commercial use and font-face embedding. If you have downloaded a font, the license information should be displayed during the purchasing process. If you are unsure about the licensing details, it would be best to contact the designer for more information.
