How to use a Google Font in Squarespace // Squarespace CSS Tutorial

Just getting started with Squarespace CSS? Awesome! 😍 I want to teach you the basics – grab my free Getting Started Guide here 👉

This tutorial will walk you through the three-step process of using any Google font on your Squarespace website.

The first step is to install the Google font by importing the URL from

The second step is to assign that font a name in your Squarespace website, using a combination of the font family name from the Google font import along with this code @font-face{font-family: name, websafe alternative;}

And the third and final step is to assign that font to a particular text type in your Squarespace site. You can assign it to anything that uses text, but here are a few examples for you to try:

h1 (heading one in Squarespace 7.0, extra-large heading in Squarespace 7.1)
h2 (heading two in Squarespace 7.0, large heading in Squarespace 7.1)
h3 (heading three in Squarespace 7.0, medium heading in Squarespace 7.1)
p (paragraph text in both versions)

#squarespace #squarespacecss #howto #customizesquarespace #css #squarespacetricks #squarespacehacks

The term “Squarespace” is a trademark of Squarespace, Inc. I am not affiliated with Squarespace, Inc. I just really love their platform.

Post Author: hatefull