Fonts are one of the elements you can use to style your website, and you can dramatically improve your website performance aesthetics with carefully selected fonts and manipulations. While most people will stick to the default Squarespace font, those with a keen eye for design won’t.
How to Customize Fonts on Squarespace
Give your website a distinct look by changing the font using the detailed guide in this post.
Let’s get started!
Find a Font Tweak
A font tweak is a tool that changes the fonts on a page, and Font tweaks work differently on different versions of Squarespace. To change all fonts site-wide on Squarespace 7.1, follow the steps below.
- Click Design, open “Site Styles” and click on “Fonts.”
- Click “Switch” on the current font pack. This displays all available font packs.
- Click on a new font pack to preview it.
- Click “Back”
- Set font’s “Base Size”
- To save your changes, hover over “Done” and click “Save.”
How to Change a Specific Font Tweak
To change a specific font tweak, simply:
- Open Fonts panel.
- Find “Global Text Styles” and click on “Assign Styles.”
- Find the text title you wish to change, like “Title” or “Button.” Click on the title to view tweak options for the text group.
- Click the menu next to the tweak name and assign a new font style.
- Clicking on “Customize” provides you with options to customize the selected text even further.
- Click “Back” or “Show All” to return.
To change a font tweak on Squarespace 7.0, follow the steps below.
- Open “Site Styles”
- Depending on your template, you’ll see different options and names for font groups.
- Select a font tweak and click on “Show All” to return to the full list.
Font tweaks can be identified by the title of the group they affect, and you can also identify them by the small arrow that opens additional options.
How to Find a Specific Font
Fonts are usually sourced from Adobe and Google font packs. Also, note that font searching works differently on different versions of Squarespace.
Follow the steps below to use a specific Adobe or Google font on Squarespace 7.1.
- Search for the fonts in the “Browse All Fonts” option
- If you’re searching for a font while editing a page, click on the “Paintbrush” icon and click on “Fonts.”
- Under “Global Text Styles,” click to select the text type you want to change. This could be “Headings,” “Paragraphs,” “Buttons,” or “Miscellaneous.”
- Click on “Family”
- Click on “Browse All Fonts.”
- Enter your font name in “Search Fonts” or scroll to browse the available fonts.
- Hover over “Done” in the top left corner and click on “Save.”
- In the “Home” menu, click “Design” and then click on “Site Styles.”
- Select the font tweak you wish to change by clicking on it, and then click the dropdown menu next to the font name.
- Enter the font name in the “Search Fonts” field or scroll to browse available fonts.
- Select the font you want to use by clicking on it. Click “Save” at the top of the panel to save and apply your changes.
However, if you don’t have a font in mind, you can search and preview fonts on Adobe and Google platforms. After seeing a font you like, you can search for it on Squarespace. You should note that some fonts might not be available.
Font styling works differently depending on your website’s Squarespace version.
To style your fonts on Squarespace 7.1, all you have to do is:
- While editing a page, click on the “paintbrush” icon to style your fonts.
- Click on “Fonts.”
- Under “Global Text Styles,” click the text type you would like to change. This could either be “headings”, “paragraphs”, “buttons”, or “miscellaneous”.
- Clicking on “Family” will list the font, and you can use the various size options to change the style of your font. Usually, your changes will stay in place while you edit other page content.
- To save changes, hover over “Done” and click “Save.”
- Click a font or typography tweak.
- This displays additional options, including font name, size, and letter spacing.
- You can adjust typography options depending on the specific text and template.
Additional style options and tweaks are available for different fonts and templates.
When styling fonts, you can adjust the weight of your text, line height, letter spacing, style, and size. You can also capitalize some, all, or none of the text. However, this tweak applies only to specific fonts.
Font/Typography Tweaks Additional Options
Clicking on a font or typography tweak will open its additional options, including font name, size, and letter spacing.
Some of these additional options include selecting or searching for a Google or Adobe font or an option to control font size by using the slider or manually entering a font size.
There is also an option that allows you to set the space between lines. However, you should note that a line-height of 0em may cause overlapping text, especially on mobile devices.
Another additional option is to set the space between letters. While using this option, the negative values may cause overlapping characters. You can also transform text by selecting if a text should be capitalized, be in uppercase or lowercase or remain normal.
Text decoration is another added option, and this lets you select if a piece of text should be overlined, underlined, or line-through. You can also align text to the left, right, and center.
How to Add a Custom Adobe Font (Squarespace 7.0 only)
Custom fonts can be added to Squarespace version 7.0 using their integration with Adobe fonts. To add a custom Adobe font, follow the steps below.
Step One: Create a Web Project and Add Fonts
Before adding your custom fonts to Squarespace, you need to create a web project in Adobe. Do this by logging into your Adobe account and following the steps for creating a web project.
After creating a web project, you’ll see the custom HTML embed code.
Step Two: Use your Project ID to Add Your Custom Fonts to Squarespace
Add the project to your Squarespace site using the project once you’ve included all the fonts you need for your web project.
- Click the “My Adobe Fonts” in the top right corner of your Adobe Fonts account.
- Click on “Web Projects” and find the project you want to add to Squarespace.
- Copy the Project ID. The Project ID is a string of letters and numbers above the embed code.
- Log into your Squarespace account.
- Under the “Home” menu, click on “Settings.”
- Click on “Advanced” and click on “External API Keys.”
- Scroll to the “Adobe Fonts Project ID” box and paste the Project ID you copied into the box
- Click on “Save.”
Once you’ve added a custom Adobe font, you can apply them to text on your site. Use the “Search” box to find an Adobe custom font quickly. All you have to do is search for it by name.
Changing fonts on your Squarespace website will give it a different look and feel. Customize your website font if you want your visitors to appreciate a unique design. Apply the steps in this guide to avoid mistakes as you proceed.