How to Change Fonts in Squarespace 7.1 (2024 Guide)
If you place a high priority on creating a visually appealing website, the choice of fonts plays a significant role. Squarespace offers a range of font customization options, and in this guide, we’ll explore how to change fonts in Squarespace 7.1 with ease.
Watch the Video 👇
Why Change Fonts on Squarespace 7.1?
Before diving into the "how," let's understand the importance of font customization. Unique and well-chosen fonts can enhance your brand identity, improve readability, and make your website stand out. By choosing fonts and font pairings that match the aesthetics of your brand, industry, and target audience, you’ll gain credibility and attract the right kind of site visitors! Whether you're a blogger, entrepreneur, small business owner, or creative professional, mastering font customization on Squarespace can elevate the aesthetics of your Squarespace website. Let’s dive right into the steps for changing fonts in Squarespace 7.1:
Step 1: Accessing Squarespace Site Styles
The first step in changing fonts on Squarespace is accessing the Site Styles design settings. Follow these simple steps:
1. Log in to Your Squarespace Account
Ensure you're logged in to your Squarespace account and have access to the website you want to modify.
2. Navigate to Site Styles
Locate the Paintbrush Icon in the upper right-hand corner of the website editor . Click on it to reveal the Site Styles settings.
3. Navigate to Fonts
Click into the Fonts Tab where you can pick a font or font pack, and customize it to achieve the style you want.
Step 2: Choosing Between a Squarespace Font Pack or Customized Fonts
Once you land on the Fonts Tab within your Squarespace editor, the first option you will see is the Font Pack. Here, you can choose from a curated list of font pairings from Squarespace. They are broken by Sans-serif (without legs), Serif (with legs), and mixed.
1. Switch Squarespace Font Packs
Your selected font will display in a large box directly below the Fonts heading (see image). Click “SWITCH” to access other Squarespace curated font packs. Toggle between each font style to access 70 different Squarespace font packs. Squarespace font packs are a quick and fool proof way to select a great font pairing for your website. The font pack selector gives you a preview of each font pack while you are browsing for the perfect match!
2. Customize Your Fonts: Squarespace Global Text Styles
Squarespace font menus grant you access to all available font options, including 600 Google Fonts and 1,000 Adobe Fonts. Scroll through the long list of font options, or use the menu’s search functionality to find a specific font.
3. Customize Your Squarespace Global Headings
While in the Fonts Tab under Global Text Styles, click Headings. These headings are global site styles that appear across your entire site. Headings grant your site visitors a more user-friendly and accessible browsing experience by providing structured keywords and titles for different sections of content throughout a page. Squarespace allows you to set a Global headings font that applies to every heading within your Squarespace website (H1-H4).
Choose a Heading Font Family
Click into the Family Tab to see which fonts you’ve used within your style guide (displayed directly under the Family heading). This allows you to toggle between fonts you’ve previously used for headings on your website so you don’t have to enter the font into the search bar or sift through the hundreds of fonts again to find it. Click the BROWSE ALL FONTS text to access the full font library. Choose any of the ~1,600 fonts available through Squarespace’s integration with Google Fonts and Adobe Fonts. The heading font selection applies to every heading on your Squarespace website globally (H1-H4).
Choose a Heading Font Weight
Depending on which font you select for your global headings, a dropdown arrow appears beside the font weight, indicating a selection of multiple options is available. The Font Weight sets how heavy or “bold” the font will display on your Squarespace website. The smaller the number (100) the thinner the font will display on your website. Oftentimes it’s good practice to select a heading font with several different font weight options (100-900) so that you can zero in on the font weight that matches your brand aesthetic.
Choose a Heading Font Style
Select between normal and italics for global headings on your Squarespace website. This setting applies to every heading on your website.
Choose a Heading Line Height
Use the slider to increase or decrease the Heading Line Height - or the space between lines of text on your Squarespace site. This is one of those fine-tune setting options that can take your website from looking good to great!
Set Your Heading Letter Spacing
Use the slider to increase or decrease the Heading Letter Spacing - changing the space between letters. Depending on which font you select for your Squarespace heading, increasing or decreasing the letter spacing value can improve readability and/or callout specific content to make it more front and center for your audience.
Use Text Transform to Set Global Headings
Choose between none (Headings display as you type them on your keyboard), Uppercase (setting your global headings to all CAPS), Lowercase (setting your global headings to all lowercase), or Capitalize (setting the first letter of each word in your heading to CAPS).
Set Your Global Heading Sizes
Use the slider that corresponds to each heading (H1-H4) and adjust it’s size accordingly. It’s good practice to set your H1 as the largest sized heading on your website, and each heading below it gets a smaller value incrementally.
Step 3: Customizing Your Squarespace Paragraph Fonts
Just like we did for the Global Headings, you now want to set your Global Paragraphs for your Squarespace site. To do this, click into the Paragraphs Tab within your Site Styles and follow the same steps listed above for changing the Family, Font Weight, Font Style, Line Height, Letter Spacing, Text Transform, and Paragraph Sizes.
Step 4: Customizing Your Squarespace Button Fonts
Squarespace affords you three different Button Block styling options (Primary, Secondary, and Tertiary), allowing you to use different font styles for each button type. This can be useful if you need a specific button font and style for a particular page or section that’s different from the primary buttons used throughout your site. Let’s take a look at how you can change your Squarespace button fonts like a pro!
Accessing and Changing your Squarespace Button Fonts
From your Site Styles Menu, click Fonts > Buttons. Just like the settings for your global headings and paragraph fonts, you have access to the Button Font Family, Button Font Weight, Button Font Style, Button Letter Spacing, Button Text Transform, and Button Size. Customize between Primary, Secondary, and Tertiary Button Fonts using the options within the Buttons Tab in your Site Styles. For a detailed guide and more information, read Squarespace Button Blocks, a Guide to Boosting Engagement.
Step 5: Customizing Your Squarespace Miscellaneous Fonts
Miscellaneous Fonts affect all miscellaneous styles on your site, for example tags, product prices, Menu Blocks, and other content metadata. The global settings for Squarespace Miscellaneous Fonts follow the same framework as Headings and Paragraphs.
Step 6 (Optional): Assign Specific Font Styles to Change a Specific Font Tweak
Squarespace grants you access to assign a font tweak to a specific font style within your site. In the Fonts Panel, Under Global Text Styles, click Assign Styles. Find the title of the specific text group that you are targeting, for example Title or Button, then click the title to open all the tweak options. Click the dropdown menu next to the tweak name to assign a new font style. To customize it even further, Click custom, then use the other options that appear. Click Show All or Back to return to the full list.
Adding Custom Fonts to your Squarespace 7.1 Site
In many instances, designers and site owners alike have a specific font they want to use on their website. If this is you then you are in luck! With some minor coding knowledge and following the steps in this guide, you can override the Global font styles set within your Squarespace editor and upload the fonts that will truly make your website pop!
Conclusion
In conclusion, changing fonts in Squarespace 7.1 is not merely a technical skill; it's a transformative measure allowing you to build a visually captivating website. By understanding the significance of font choices and delving into the intricacies of adjusting global headings, paragraphs, buttons, and miscellaneous fonts, you've unlocked the creative potential of your Squarespace website. Whether you're a blogger, entrepreneur, or creative professional, this guide equips you with the knowledge to elevate your website aesthetics and engage your target audience effectively. As you learn how to change fonts in Squarespace 7.1, embrace the freedom to express your brand identity, captivate your visitors, and make your Squarespace 7.1 website truly unique.
Your Designer
I'm Travis, an expert Squarespace web designer and 7+ year former Squarespace employee. I have worked with every type of business, building platforms for solo entrepreneurs through to multi-million dollar corporations. If you want to discuss a potential project, you can email at travis@coyotemooncreative.com. Alternatively, you can book a 30-minute consultation call here.
Newsletter Signup
Sign up for my newsletter to receive detailed Squarespace design tutorials delivered to your inbox monthly. Get practical Squarespace design tips, as well as digital marketing strategies to grow your online business.
