Image Source

Adding attractive and legible fonts to your website can greatly enhance user experience. But changing fonts may be a little complicated to grasp for some users on Squarespace. This article will help you address that issue.

Please continue reading to learn how to change font on Squarespace.

Understanding How Fonts Work on Squarespace

Before explaining how to change font on Squarespace, you must understand how fonts work on the website building platform.

Please read below to find out the features, implications and limitations of using fonts on Squarespace.

  • The Squarespace library consists of over 600 Google fonts and 1000 Adobe fonts. To access these visit the Font menus. Or, you can type the name of the desired font in the menu’s search field and find it quickly.
  • For easy navigation and user-friendly experience, Squarespace keeps the menu short. This means, the menu shows limited options first in order to reduce cluttering and confusion. The initial results are a mix of previously used fonts and the most popular font options available on the platform. Also, it is important to note that not all formatting options offered by Google and Adobe fonts are compatible with Squarespace.
  • When you make and apply changes to most font categories (like Heading or Paragraph), the changes are applied site-wide. For instance, changing the font of Heading 2 Text will automatically change all text set as Heading 2 text throughout your site.
  • If you wish to create Headers in the body text, go to the Text Block Editor and use the Format drop menu. You can easily alter the Heading styles after creating a Header.
  • The rendering of fonts will vary across platforms and devices, such as Windows, Mac, iOS and Android. In certain cases, the fonts will render differently depending on the web browser being used. For example, the font in the drop-down menu may seem different on different browsers.
  • Google and Adobe may, on occasions, remove some fonts from their library. If you happen to be using such a font on your website, the removal of that font from the parent library will not change that font on your website. But, if you change the font after Google or Adobe has removed it from their library, you cannot switch back. To address this issue Squarespace tries to find and suggest a font closest in design to the deleted font.
  • The reason behind Squarespace’s limited pool of font options is design consistency. The platform aims to give your site a consistent, unified and aesthetically pleasing visual. It intentionally suggests the font styles which complement each other and not look jarring to the audience. If you still need to add a custom font to your text, you can do so with CSS (Cascading Style Sheets). If you are running the version 7.0 of Squarespace, the software accepts custom fonts from Adobe.

These were some essential facts about the way fonts work on the website-building platform. Now it is time to discover how to change font on Squarespace.

How to Change Font on Squarespace – Step-by-step Instructions

Image Source

In this section you will learn the various ways to change a font on Squarespace.

Finding a Font Tweak

The way a font tweak will work depends on which version of Squarespace you are using.

To change all fonts across the site, follow these steps (For Squarespace version 7.1) –

  1. When you are editing a page, open the “Site Styles” option and click on “Fonts”.
  2. To view all the available font packs, click on “Switch” on the current font pack. To see different font packs for each style you may click on options “Sans-serif”, “Serif” or “Mixed”.
  3. To preview how the final font will look on your site, click on a new font pack.
  4. To set a font’s “Base Size”, click on the “Back” button and return to the “Fonts” panel. Now select “Base Size”; the other text scales used on your site is relative to this size.
  5. You can edit other page content without worrying about losing your changes. If you wish to save your progress, drag your mouse cursor over to “Done” in the top left corner of the page editor and click on “Save”.

To change only a particular font tweak, follow these steps (For Squarespace version 7.1) –

  1. Go to the “Fonts” panel, click on “Global Text Styles” and select the option “Assign Styles”.
  2. Look for the title of that text group, like the “Button” or “Title”. Then, to open all options for tweaking for that group, click on the title. To check out tweak options for any text, simply click on that text on the page preview.
  3. For assigning a new font style to text, click on the drop menu next to the tweak name. For further customizations, click on the “Custom” option. This will display all the available customization options.
  4. You can select “Show All” to see these options. If you want to return to the entire list, click on “Back”.

To change font tweaks on Squarespace version 7.0, follow these steps –

  1. Open “Site Styles”. The font options displayed here will depend on the template you are using. To identify Font tweaks, refer to the Title of the group they affect. The small arrow provides even more options.
  2. You can also click on a text on the page. This will display its tweaks in site styles. To view the full list, click on the “Show All” option.

Finding a Particular Font

The way you search for a font will depend on which version of Squarespace you are using.

For users of Squarespace 7.1 version, these are the steps to find a specific font –

  1. When editing a page, click on the “Paintbrush” icon and select the “Font” option.
  2. Now click on the “Global Text Styles” options. This will display various text types you can change, like – “Paragraphs”, “Headings”, “Buttons” or “Miscellaneous”.
  3. Click on “Family”.
  4. Then select the option “Browse All Fonts”.
  5. Now you can scroll around to find a font of your preference. You may use the “Search Fonts” field at the top of the panel to enter the name of the font you wish to choose.
  6. If you wish to save your progress, drag your mouse cursor over to “Done” in the top left corner of the page editor and click on “Save”.

For users of Squarespace 7.0 version, these are the steps to find a specific font –

  1. Go to the “Home Menu” and click on “Design”. Then select the option “Site Styles”.
  2. Click on the font tweak you would like to change. Proceed to click the drop menu next to the font name.
  3. Now you can scroll down to find a font of your preference. You may use the “Search Fonts” field at the top of the panel to enter the name of the font you wish to choose.
  4. Click on the font of your liking, then click on “Save” at the top of the panel. This will apply your changes.

Styling a Font

The way you style a font will depend on which version of Squarespace you are using.

For users of Squarespace 7.1 version, these are the steps to styling a font –

  1. When editing a page, click on the “Paintbrush” tool. Then click on “Fonts”.
  2. Now click on the “Global Text Styles” options. This will display various text types you can change, like – “Paragraphs”, “Headings”, “Buttons” or “Miscellaneous”.
  3. The “Family” button will display available styling options. You can use various styles and sizes as per your requirement.
  4. If you wish to save your progress, drag your mouse cursor over to “Done” in the top left corner of the page editor and click on “Save”.

For users of Squarespace 7.0 version, these are the steps to styling a font –

  1. Click on a “Font” or “Typography” tweak. This will open additional options like font size, font name and letter spacing.
  2. Now you may add the necessary style changes to your font. The styling options are limited to – Font type, Size, Line Height, Letter Spacing, Text Transform, Text Decoration and Text Align.

Adding Custom Adobe Fonts (Works for Version 7.0 only)

The Squarespace version 7.0 offers integration with Adobe Fonts. Unfortunately, version 7.1 does not support custom Adobe fonts.

Follow these steps to add custom fonts to your site –

1. Create a web project in Adobe. To do this, log into your “Adobe Fonts Account” and create a web project by following their instructions. Once the project is created, you will notice your customized HTML embedded code. Skip this. You do not need to add this code to your site. See the next step.

2. Upload all the custom fonts you need on your web project. Now add the project to your site on Squarespace using the project ID.

3. To know your project ID, go to your “Adobe Fonts Account”, click on “My Adobe Fonts”. Then click on “Web Projects” and find the project you want to add to Squarespace.

4. You will notice a string of numbers and letters above the embedded code. This is your project ID. Copy it.

5. Now log into your Squarespace site and go to “Home Menu”. Click on “Settings” and go to “Advanced” options.

6. Click on “External API Keys”

7. Scroll down till you find the “Adobe Fonts Project ID” box.

8. Click on “Save”.

9. Now you can add the font to your site. Find the font by typing its name in the “Search” box.