Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 2

Adding a google font not currently incorporated in 7.1


Alpen

Question

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

4 answers to this question

Recommended Posts

  • 1
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 Paul: Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Expert and founder of 
SF Digital, a company dedicated to improving websites by building the features Squarespace didn't include™. See our range of extensions to improve your online store.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Link to comment
  • 0

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.

Capture.PNG

New Fonts.PNG

Link to comment
  • 0

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

Link to comment
  • 0

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