How To Use A Google Font on Squarespace

Sep 10

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 2024 Google font interface:

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 Pages → Website Tools → Custom CSS
Paste the import 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!

Please note: The video below is a little outdated, but it can be helpful for the custom code aspect of these steps!

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 */

@import url('https://fonts.googleapis.com/css?family=Shadows+Into+Light&display=swap');

#block-1234 h1{
font-family: 'Shadows Into Light', cursive;
}

font