Squarespace Expert. How to import a font into Squarespace 7.1

Squarespace has a good choice of fonts. Sometimes you may need to import a font that matches your branding. Google Fonts and Font Squirrel are a good place to find free fonts.

As part of our ‘Squarespace Experts’ series of blogs here are our tips. To import a font into Squarespace 7.1, follow these steps:

1. Choose Your Font File
   Ensure your custom font is in one of the supported formats: .woff, .woff2, .ttf, or .otf.

2. Access the Custom CSS Editor

   • Log in to your Squarespace account and navigate to your site.

   • In the Home Menu, go to Design > Custom CSS.

3. Upload the Font File

   • Click on the Manage Custom Files button at the bottom of the Custom CSS panel.

   • Upload your font file. Once uploaded, it will be assigned a URL used in the CSS.

4. Add @font-face Rule
   Use the following CSS syntax to import the font:

   @font-face {
       font-family: 'YourFontName';
       src: url('URL_of_uploaded_font_file') format('woff2'); /* Adjust format as needed */
       font-weight: normal;
       font-style: normal;
   }
   

   Replace 'YourFontName' with a custom name you will reference, and replace 'URL_of_uploaded_font_file' with the actual URL from the uploaded file.

5. Apply the Font to Elements
   Use CSS to assign your custom font to site elements, for example:

   h1, h2, h3 {
       font-family: 'YourFontName', sans-serif;
   }
   

6. Save Your Changes

   • Click Save to apply the new font style to your website.

Notes:

• Custom fonts will only work on domains connected to your Squarespace account.

• Always check font licensing to ensure web use is permitted.

• You can also use Google Fonts directly through Squarespace's built-in font options if custom upload is not necessary.