The Ultimate Hack to Using Custom Fonts on Squarespace 7.0

Most Google fonts and Adobe Fonts are built-in as fonts options in Squarespace. There are also a lot of resources you can find on how to add custom fonts on Squarespace. But what I would like to share is the method that will make your custom font accessible via the SITE STYLES panel. This way, you won't need to identify the CSS class for every type element you wish to customize.

---

Preview

Here’s a preview of how easy it will be to apply custom font to any type element on your website. My website uses a Custom Font, Ogg Roman - which is not built-into Squarespace.

---

Your step-by-step guide

1. Secure your webfonts

Our first step is to secure our webfonts. Webfonts have the .woff and .woff2 file formats.

If you purchased your web license via Commercial Type, My Fonts, Font Squirrel et al, your downloads include these file formats. Please make sure to read the details of the license as font providers usually have different pricing for webfonts based on the number of visits.

If you obtained your font through Creative Market and other sources but the downloads did not include woff and woff2 files, I suggest using the Font Squirrel Webfont Generator to generate these file formats.

Note that the license for desktop is different from webfont license. Please ensure you secure the web license before uploading to your website.

2. Upload webfonts to your website

On your website, Go to Design > Custom CSS

Scroll Down to click the “Manage Custom Files” option

Upload your webfonts (both the .woff and .woff2 files)

3. Declare your custom font under Custom CSS

Paste the code below under Design > Custom CSS

@font-face {
  font-family: 'Example';
  src: url('path-to-fonts/Example-Regular.woff2') format('woff2'),
       url('path-to-fonts/Example-Regular.woff') format('woff');
}

---

Note that we still need to change the placeholder texts above with your own font details. View the GIF to see how it’s done.

Sometimes the code will still work even if you don’t have the woff2 file. Hence, this alternative code syntax will work.

Watch how I delete https: from the font path so our font can still load while the SSL is still in process.

Here’s how the code should like upon specifying your font name and font path.

@font-face {
  font-family: 'Canela';
  src: url('//static1.squarespace.com/static/59641ae58419c27cc32d96ce/t/5de122c4d36d6241f1608195/1575035602063/Canela-Regular-Web.woff2') format('woff2'),
       url('//static1.squarespace.com/static/59641ae58419c27cc32d96ce/t/5de122b3f26533387afba5e2/1575035573815/Canela-Regular-Web.woff') format('woff');
}

4. The Ultimate Hack: Add the magic script

The genius behind Squarespace Extension Pro (which I recommended on this post) developed the magic script to make our custom fonts accessible via Site Styles. Please click through the button below to view the script.

Just add the script to Settings>Advanced>Code Injection>Footer

and then Save.

---

5. Choose your font under Site Styles

After browser refresh, your custom font should soon show up on your Site Styles options. Best to use the Search option and start typing the name of your custom font.

Note that since it takes time to load the preview of custom fonts. This might appear as the preview on your end.

Simply select that option and the font will still be applied.

Hope it works for you! Feel free to comment below if you have questions or feedback.

Squarestylist Courses

Join the mailing list to stay in the know and check out our quick courses on CSS hacks and stylish sections. 

Easily Create Mega Menus and Pop-out Navigation on Brine Templates