How to install custom fonts on Squarespace
Table of Contents Show
📌 Pint it!
Staying on-brand is really important. Consistency is the key to subtly help your audience develop Know/Like/Trust with you & your brand.
Why? People, as in the collective “we,” like to predict & be able to expect things. Generally speaking, having those predictions/expectations makes us more comfortable in that space.
On the flip side, the unknown is (to most of us) scary or makes us feel uncertain about the space we’re in.
Depending on the vibe your site is going for, it’s usually better to mostly stick with a format that becomes expected, i.e.: headers are usually the same font, accent colors are usually the same, buttons usually look the same, etc.
Having a set grouping of styles for buttons, headers, colors, fonts, etc, will help your audience navigate your site better, trust you more, and actually enjoy hanging out in your online space.
–As opposed to your readers never knowing what titles of sections are because those titles are always in different fonts, sizes or colors, or buttons sometimes being images or weird unrecognizable shapes, etc.
That said, sometimes staying on-brand with your fonts can be difficult if your brand doesn’t use one of the many Squarespace already has available in Site Styles.
If you can’t find your font of choice, then how can you use it on your website? How do you install it? That’s a great question!
Text wrap & auto hyphens
We can’t talk about customizing fonts without also addressing the pink elephant in the room.
I’m talking about that weird text-wrap/automatic hyphenation thing that Squarespace does by default. It’s irritating that there’s no native option to control this in Site Styles, but don’t worry; I’m not mentioning it here just to leave ya hanging without a fix.
I add this snippet to all of my client sites because I hate how (otherwise) it cuts off long words, and adds hyphens in weird places.
So, here’s how to fix this site-wide & cut out the bulk of that problem for you! Copy-and-paste, no edits needed.
For 7.1
// Remove hyphens from text //
p, h1, h2, h3, h4 {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}For 7.0
// Remove hyphens from text //
p, h1, h2, h3, {
-webkit-hyphens: manual !important;
-moz-hyphens: manual !important;
-ms-hyphens: manual !important;
hyphens: manual !important;
}Adding custom font styles
Now, on to the good stuff!
In case your client has a font that isn’t available within Squarespace’s native font options, this is how you’d install a custom font on your site.
First, you want the web font formats (.woff + .woff2). If you don’t have those, you can get it from FontSquirrel.com for free, but make sure you have the appropriate license to use this font on your website.
NOTE 1:
if you don’t have a web font license, you need to buy that first; .ttf and .otf are not web font formats. You can buy the web font license from places like MyFonts.com and CreativeMarket.com, or wherever you initially purchased the font files.)NOTE 2:
Keep in mind that text is everywhere on your site, so this doesn’t cover changing the navigation font, button font, lightbox form fonts, etc., –only the body copy on each page. To change those other things you have to target them with their own Custom CSS individually.
Install the font to your website
First I’d go to Design, then Custom CSS. Scroll to the bottom of that menu area and click Manage Custom Files. Click the icon in the little popup that indicates a file upload, find the font file on your computer, then pick the .woff format and click Open to upload it in the CSS area. Repeat to upload .woff2.
Next, you’ll paste in this bit of code:
// label your custom font here //
@font-face {
font-family: 'Font-Name';
src: url("https://static1.squarespace.com/static/fakeURL/Font-Name.woff");
src: url("https://static1.squarespace.com/static/fakeURL/Font-Name.woff2");
}Next, delete the text between single quote marks (leave the quote marks!), and once that text is gone, leave your cursor there.
Go back to Manage Custom Files & click on the font file you just uploaded. This is how you get the URL for the saved location of that file, for your website. When you click the file in the Manage Custom Files section, it will automatically paste the location (source) URL where your cursor was in the CSS.
Now it should look something like this:
// Header 2 - custom font //
@font-face {
font-family: Lato-Heavy;
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff");
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff2");
}I always paste the URL of the uploaded (installed) font file FIRST, so I can copy-and-paste the EXACT name of the font from the end of that url, –minus the font file type (the .woff or .woff2 file format extension).
Note! If you type the name of the font wrong, the code may not work.
Now use CSS to tell the website where to display that font
Next you need to write the CSS which tells your site where to put that font, or swap it out. That snippet looks like this for customizing a Heading 2 style:
h2 {
font-family: 'Lato-Heavy' !important;
}Congrats! You’ve just uploaded a customized font for your H2 / Header 2!
If you want to instead change H1, H3, H4, or P, just swap out my ‘h2’ and replace it with ‘h1’ or ‘h3’ or ‘h4’ or ‘p’ (no quote marks here). For example, changing the H1 would look like this:
// Header 1 - custom font //
@font-face {
font-family: Lato-Heavy;
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff");
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff2");
}
h1 {
font-family: 'Lato-Heavy' !important;
}Keep in mind too, that for 7.0, it only has built-in selectors for H1, H2, H3 and P.
For 7.1 however, you can designate a font choice for each of these: H1, H2, H3, H4, and P. So your code might look like this for Heading 4 style:
// Header 1 - custom font //
@font-face {
font-family: Lato-Heavy;
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff");
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff2");
}
h4 {
font-family: 'Lato-Heavy' !important;
}If you want to change multiples of these, you can combine them like this, removing the ones you don’t want to use from the second part of this snippet:
// Header 1 - custom font //
@font-face {
font-family: Lato-Heavy;
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff");
src: url("https://static1.squarespace.com/static/fakeURL/Lato-Heavy.woff2");
}
h1, h2, h3, h4, p {
font-family: 'Lato-Heavy' !important;
}Customizing the bold & italics versions
Adding a font version for bold and/or italics is easy, too. All you have to do is upload the font files for Bold, and for Italics. Then use the same code above, paste in the unique URL to the new Bold font file, and then edit the H1 to say:
“em” stands for emphasis, which is the italicized designation.
”strong” is used for the bold font style designation.
”strong em” is used for combining the bold & italic designation.
h1 em {
font-family: 'Exact Font Name' !important;
font-style: normal !important;
}
h1 strong {
font-family: 'Exact Font Name' !important;
font-weight: normal !important;
}
h1 strong em {
font-family: 'Exact Font Name' !important;
font-weight: normal !important;
}The addition of the “font-weight: normal” is to tell Squarespace not to add a stroke around the bold version to MAKE it bold. And the addition of “font-style: normal” tells it not to skew the italics version to FORCE italics, etc. That way, it will display the font as it was originally designed in each style.
Once you’ve added that bit of code for each of the H1-4, and P font styles in the CSS, make sure you Save your changes. From now on, anytime you’re using a text block, you can select these styles from the editor menu to trigger that custom font to display based on how you installed it.
on 7.0
NORMAL
Regular
Italic
Bold
Bold Italic
HEADING 1
Regular
Italic
Bold
Bold Italic
HEADING 2
Regular
Italic
Bold
Bold Italic
HEADING 3
Regular
Italic
Bold
Bold Italic
on 7.1
HEADING 1
Regular
Italic
Bold
Bold Italic
HEADING 2
Regular
Italic
Bold
Bold Italic
HEADING 3
Regular
Italic
Bold
Bold Italic
HEADING 4
Regular
Italic
Bold
Bold Italic
PARAGRAPH 1
Regular
Italic
Bold
Bold Italic
PARAGRAPH 2
Regular
Italic
Bold
Bold Italic
PARAGRAPH 3
Regular
Italic
Bold
Bold Italic
Another “fun” thing to make note of as you decide these font styles is that in v7.1 the paragraph styles work differently than headings. But FAIR WARNING: watch the video (👆🏻 above) to find out why I suggest choosing your Paragraph fonts in Site Styles ONLY, and not in the Custom CSS, unless you’re comfortable writing tons of code yourself.
p = does represent all 3 paragraph style sizes
p1 ≠ does not target paragraph 1
p3 ≠ does not target paragraph 3
there is no p4
If you’re specifically wanting to change Paragraph 1 and/or Paragraph 3 individually, you can’t use p { } to change it. You have to use the specific selector for that, which is:
p.sqsrte-largefor p1pfor any paragraphp.sqsrte-smallfor p3
PLEASE NOTE:
One key thing to note here is that just because “p” represents all paragraph styles, it does NOT also mean installing a custom font for “p” will work in all instances that paragraph font style shows up on your website. Why?
Because every time you see that font show up outside of traditional body text within a "text block" or other block that supports paragraphs & rich text, each one of those other places has a different selector in the code. In order to swap out your preferred custom font in its place, the code has to have an override for each type of place it displays.
If your hope is to build something that is DIY-maintainable and scalable, you won’t want to have to hire someone like me to fix that shit every single time you run across yet another spot where the custom font isn’t showing. And it WILL happen, ALL THE TIME. 😂
In short:
the custom font installation is just a manual code override. Overriding a default font on the Headings is easier because they are minimally used on the website; titles are used sparingly, after all. But swapping out a built-in font on Squarespace 7.1 websites for the “paragraph” font designation, it’s quite literally impossible to predict everywhere it will show up across the entire site, for the life of the website, because it’s in LITERALLY everything else on the website –from button fonts, to tag fonts on blog collections, to menus & links, to prices in the shop, to the text in summary blocks, galleries, list sections, search blocks, ––literally everything else.
And the only way you can override a font in Squarespace, is if you find/know the selector which targets each opportunity where that font displays.
How to display 2 font styles in 1 heading/paragraph style
PRO TIP:
You don’t have to have the same font family for a bold or italicized version of a single Heading or Paragraph font style.
What I mean by that is: let’s say your font doesn’t have an italics version –which is cool because maybe you have this wicked script font you wanted to use instead, anyway.
You can dictate that H1 italics will always display as that script font instead, and regular & even bold H1 are the serif/sans serif font you initially installed.
Here’s what that code may look like:
// Header 1 - custom SERIF font //
@font-face {
font-family: 'PlayfairDisplay', serif;
src: url(https://static1.squarespace.com/fake-url/PlayfairDisplay.woff);
src: url(https://static1.squarespace.com/fake-url/PlayfairDisplay.woff2);
}
h1 {
font-family: 'PlayfairDisplay' !important;
font-size: 2em;
}
// Header 1 - custom SCRIPT font //
@font-face {
font-family: 'Pinyon Script', cursive;
src: url(https://static1.squarespace.com/fake-url/PinyonScript.woff);
src: url(https://static1.squarespace.com/fake-url/PinyonScript.woff2);
}
h1 em {
font-family: 'Pinyon Script' !important;
font-size: 2.5em;
font-style: normal !important;
padding: 15px;
}Which results in something like this:
Which would look (= H1 normal)
like this (= triggered by italicizing the H1 font style)
Every font will take up different amounts of space on a page, so it’s not surprising that sitting two starkly different fonts side-by-side might make their size differences more obvious.
If your secondary font styling for the em or strong sits too high up or too low from the baseline of the other letters in that same sentence, you can add a position and top margin property value to that styling group or try increasing the font size of the script. I’ve added it at the end of this example below. Change the number values accordingly to fit your customization need, with positive or negative pixel values in the “top” property.
h1 em {
font-family: 'Font Name' !important;
font-size: 2.5em;
padding: 15px;
position: relative;
top: 3px !important;
}What you’re trying to achieve here is a visual balance between the different styles. So you want one to take up the same amount of visual space as the other, so they they ‘appear’ to be the same font size even though they likely aren’t. This means the script font may actually need to be a bit larger than the other font, in order to take up the same amount of space. It may also mean that the baseline for the script might not need to be the same as the one for the font next to it, which is why we moved it down a little by adding 3px of top spacing to push it down a little & make it feel more like it was handwritten there, which wouldn’t be perfectly aligned.
There’s no right or wrong here! It’s completely dependent on your design & how you want it to look!
