Jump to content

Adding a google font not currently incorporated in 7.1

Recommended Posts

Hi all, Does anyone know how hard it would be to custom code a non supported font into 7.1? I want to use a standard google font which isn't included but not if it's going to be a very difficult thing to do. I am new to the platform still trying to decide if it's right for an upcoming project.

Link to comment

There's a lot of built in fonts for the Squarespace 7.1 templates and it looks like they are adding new ones consistently. I don't think they currently support custom fonts installed by you (the user), but there is a nice selection to choose from that is serif, sans serif or a mix of both.

Navigate to Designs --> Site Styles --> Fonts and click the Switch link to choose from the list of all fonts.

Newly available fonts are labeled with the "New" icon on the right side.


New Fonts.PNG

Link to comment
46 minutes ago, Alpen said:

Does anyone know how hard it would be to custom code a non supported font into 7.1? I want to use a standard google font which isn't included.

You can add any Google Font to a Squarespace 7.1 site but it won't appear in the site styles panel. Instead, you'll need to add it with code (requires a Business Plan or above) and then use Custom CSS to apply it to the areas where you want to use it.

About: SQSP User for 17 yrs. Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF Digital, building Squarespace Extensions to supercharge your commerce website. 
Content: Links in my posts may refer to SF Digital products or may be affiliate links.
If my advice helped, you can thank me by clicking one of the feedback emojis below. I love coffee too.

Link to comment

@Alpen To achieve this you'll need to use Custom CSS. 

In the menu if you select 'Design' and then 'Custom CSS'  and scroll down you will see a button labelled 'Manage Custom Files'. This is where you'll need to upload your font file. 

Then in the CSS area you'll need to add some code - 

@font-face {
  font-family: 'fontName';
  src: url(font location);

And then using CSS you can assign this font to different blocks / heading types.

Squarespace Developer based in Hampshire, England

If you'd like to make a contribution for my time you can Buy Me A Coffee.

Link to comment
  • 2 weeks later...

You can upload a font and use the following code to target/assign it.

@font-face {   
font-family: 'font-name';   
src: url(URL.ttf/.otf);}

ThE URL can be an external link, but my preferred method is to upload the font under "Manage Custom File" which is right below the CSS window.

Then target whatever H or P's your wanting using the following code.

h1 {
font-family: 'font-name';}


Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.