How To Use A Google Font on Squarespace

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:

  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 Pages → Website Tools → Custom CSS

  7. Paste the import 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!

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;
}
insidethesquare


Grab my collection of custom codes for Squarespace: 
→ insidethesquare.co/css

https://insidethesquare.co
Previous
Previous

How to create horizontal scrolling images in Squarespace

Next
Next

How to remove the header and footer from a single page in Squarespace 7.1