How To Add A Google Font to Squarespace

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. 1. Visit fonts.google.com to select a font you want to use.

  2. Select your bag/cart icon to see the font family you have selected

  3. On the Web options, choose the @import toggle

  4. Copy the code for this font

  5. Open the Squarespace editor

  6. Navigate to Website → Website Tools → Custom CSS

  7. Paste the code here

  8. Remove the style brackets, including the carrots, so your code will start with @import

  9. 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

  10. Copy the font family name from Google

  11. Using the selector or block id & asterisk, assign the font to a specific item in Squarespace by using it’s font name

  12. Use additional text & font properties to change the style of the font you’ve uploaded to your Squarespace site

  13. Save your custom css when you’re done!


Video tutorial

Here are the steps from this tutorial:

  1. 1. Visit fonts.google.com to select a font you want to use.

  2. Select your bag/cart icon to see the font family you have selected

  3. On the Web options, choose the @import toggle

  4. Copy the code for this font

  5. Open the Squarespace editor

  6. Navigate to Website → Website Tools → Custom CSS

  7. Paste the code here

  8. Remove the style brackets, including the carrots, so your code will start with @import

  9. 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

  10. Copy the font family name from Google

  11. Using the selector or block id & asterisk, assign the font to a specific item in Squarespace by using it’s font name

  12. Use additional text & font properties to change the style of the font you’ve uploaded to your Squarespace site

  13. 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

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

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

insidethesquare

Squarespace Circle Leader & Creator of InsideTheSquare.co

https://insidethesquare.co
Previous
Previous

How to create a split layout with section dividers in Squarespace

Next
Next

How To Change Marketing Consent Text on Squarespace Forms