How to Add Custom Fonts to Squarespace
Adding a font into Squarespace is easier than you think! Follow these steps, and it should work.
There are several ways to connect custom fonts to Squarespace. One is by loading the font into the Custom CSS page (which we’ll go over here), and the second is to connect your Adobe TypeKit ID to your Squarespace website.
Add Custom Font to CSS
Video coming soon! This is a basic copy & paste process that will have your font on your site in just minutes. Closed captions are being created for this video.
Here are all of the steps in summary—we will need to upload and then assign the font in order to use it. You can repeat all of these steps for additional fonts.
1. Download the font of choice and open your Squarespace Account. Head to the main menu. Click Design. Then click Custom CSS.
2. Click Open in Window to view better, and access the Manage Custom Files section.
3. Go to your downloaded font folder and drag the .OTF file to the “Add Images or Fonts”. If you already have files loaded in, this can sometimes just appear as a grey area. Drag + Drop still works.
4. We need to add in our code before going any further. I’ve included the ability to assign several different font types. Only use what you need.
Click Copy, + Paste into your Custom CSS Panel.
PS—EM refers to the italic version of a font. Strong refers to bold.
/*Add Custom Font*/
@font-face {
font-family: ‘FontName’;
src: url('SPACE HOLDER FOR THE REAL LINK THAT WILL GO HERE DON’T DELETE THE OUTSIDE MARKS');
}
/*End Custom Font*/
/* Assign Custom Font */
h1 {
font-family: FontName;
font-style: normal;
font-weight: 500;
font-size: 22px;
line-height: 1.0em;
letter-spacing: 0.083em;
color: #000000;
}
/* End Custom Font */
//*Extra Options for Headers + Fonts*//
h2 strong {
font-family: oswald;
font-style: normal;
font-weight: 500;
font-size: 42px;
line-height: 1.2em;
letter-spacing: 0;
color: #000000;
}
h2 em {
font-family: oswald;
font-style: normal;
font-weight: 500;
font-size: 40px;
line-height: 1.25em;
letter-spacing: 0.02em;
}
5. Now we need to “Add” our font into the CSS + Assign our font — otherwise it won’t work.
Step A: Change the font name, and make sure it appears exactly as it’s labelled on the font file. Sometimes font names have dashes (-) and sometimes they don’t. If it does and you’re having trouble making it work… try taking out the dash between say “SydneyRegular” for the @font-face segment. And keep it for the assign section. It should work. I know — tech is tricky and annoying.
Step B: Remove the filler text and make sure to leave the ‘ ‘ marks, otherwise it will not work.
Step C: Place your cursor between those two ‘ ‘ marks and click on your font.
6. Change out the remainder of the Font Family Names. Update font sizes and weights as needed.
Click Save! You shouldn’t need to refresh.
Pro Tip: Open your site in a separate browser tab, and go to a few pages to see it display. Depending on if you purchased a custom template, you may need to adjust settings throughout your CSS code.
Note: This will work for 7.0 and 7.1. You can use this same way to add additional fonts and assign headers.
Adobe typekit + squarespace
Coming soon!
If you watch these videos and are still stuck, let’s schedule a time to go through it together.
CHECKLISTS, GUIDES, TIPS AND MORE
GET THEM BY JOINING THE LIST
Hey! We share marketing tips and resources for small business owners, entrepreneurs, fit-bloggers and movement instructors. Learn more about our CUSTOM WEB DESIGN SERVICES, or check out our FREE GUIDES to DIY-ing your dream business.
SHARE these biz tips!
Know someone who could benefit from this article? Share it with them: