How To Add A Google Font to Squarespace

Oct 17

Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content

About this tutorial

This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes

This tutorial has been updated for 2024 There was a major URL change that prevents some Google fonts from being used, and the Google interface is slightly differnt. Make sure you follow the steps to import the correct font file.

In your Site Style menu, you have access to the entire Google Font database. So why would you need to install it on your Squarespace site? If you want to use a google font on something that you cant edit directly in site styles menu, like an accordion block title or a summary block description, or a list section button.

For that you’ll need to add the Google font to custom CSS, and that’s exactly what you’ll learn how to do in this tutorial.

Here are the new steps, updated for the 2023 Google font interface:

1. Visit fonts.google.com to select a font you want to use.
Select your bag/cart icon to see the font family you have selected
On the Web options, choose the @import toggle
Copy the code for this font
Open the Squarespace editor
Navigate to Website → Website Tools → Custom CSS
Paste the code here
Remove the style brackets, including the carrots, so your code will start with @import
Remove the 2 in the url for CSS2
Please note - most of the fonts in the Google font database will work, but some of the latest have not been updated and will not work with this method. if your font doesn’t load using only CSS, you’ll need to install the font following these instructions: developers.google.com/fonts/docs/css2
Copy the font family name from Google
Using the selector or block id & asterisk, assign the font to a specific item in Squarespace by using it’s font name
Use additional text & font properties to change the style of the font you’ve uploaded to your Squarespace site
Save your custom css when you’re done!

Video tutorial

Here are the steps from this tutorial:

1. Visit fonts.google.com to select a font you want to use.
Select your bag/cart icon to see the font family you have selected
On the Web options, choose the @import toggle
Copy the code for this font
Open the Squarespace editor
Navigate to Website → Website Tools → Custom CSS
Paste the code here
Remove the style brackets, including the carrots, so your code will start with @import
Remove the 2 in the url for CSS2
Please note - most of the fonts in the Google font database will work, but some of the latest have not been updated and will not work with this method. if your font doesn’t load using only CSS, you’ll need to install the font following these instructions: developers.google.com/fonts/docs/css2
Copy the font family name from Google
Using the selector or block id & asterisk, assign the font to a specific item in Squarespace by using it’s font name
Use additional text & font properties to change the style of the font you’ve uploaded to your Squarespace site
Save your custom css when you’re done!

 Code Example

Here is the code from this tutorial. 
Be sure to update the selector and/or block ID for your own website needs.

Changing a list item title font

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap');
.list-item-content__title {font-family: 'Shadows Into Light', cursive;}

Changing the H1 font in a text block