How to add custom fonts to Squarespace site

Squarespace HelpSquarespace tipsSquarespace TutorialSquarespace Web Design

Nov 8

Squarespace has a variety of fonts available out-of-box. There are many Google and Typekit fonts to choose from. You can even add your own Webfonts fromTypekit or other 3rd part font providers but more often than not, you will need to add custom fonts to make them available for choosing in Style Editor, which is actually an important consideration.

My clients have often asked me to do that. It can be conveniently achieved and you don't need to code every style if they already are in style tweaks. So I've found a little "hack" to reach this goal.

The first part is fairly typical: go to Custom CSS tab, upload your custom font files and create the necessary CSS @font-face rule using these files URLs. Make sure you remove the HTTP protocol section from font URLs – this trick allows you to load font files both on secure (HTTPS) and non-secure (HTTP) connections. This is important because when you are editing your Squarespace site it is an HTTPS: connection and this allows you to enjoy your fonts to display in a WYSIWYG fashion. I used the free NOOA SEMISERIF font for this example and illustrated below is what my Custom CSS Panel code looks like for my case.

Adding custom fonts to Squarespace: Custom CSS

Next part is more tricky. Squarespace uses "websafe" fonts in their Style Editor. These are: Arial, Helvetica Neue, Times New Roman and others "system" fonts commonly available in all devices. So we will use this and make Squarespace adds our custom font to that list. In that way we make custom font available in Style Editor.

Also, would be great to make preview for this custom font in choosing dialog. We need to inject our custom styles to main admin window for that. So, I did the final javascript for that (just add it in Code Injection Tab no matter to header or footer area):

<script>
  window.customFonts = [
    {name:'Nooa-SemiReg', type:'Sans Serif'}
  ];
</script>
<script async src="https://assets.squarewebsites.org/custom-fonts-script-loader.js"></script>

If you're going to add several fonts - notice you may set them in Array:

<script>
  window.customFonts = [
    {name:'EskelDisplayLarge', type:'Sans Serif'},
    {name:'BrownStd-Bold', type:'Sans Serif'}
  ];
</script>
<script async src="https://assets.squarewebsites.org/custom-fonts-script-loader.js"></script>