How to browse all the fonts that are available inside Squarespace 7.1
If you’ve played around with the newest iteration of Squarespace, version 7.1 (use code BEJ10 for 10% off), you may have seen that under the Site Styles > Fonts settings they have some pre-selected font pairings available to choose from. I think this is an awesome new feature! No more guessing with trial & error for hours on end to come up with a combo that will actually look nice.
Here’s the downside though: what if you actually wanted to come up with your own font selections? How do you access all the fonts that are available to use? And where the heck are they keeping the option to change your navigation and site title fonts?! Urgh.
Even being a seasoned user of the older version of SQSP, this stuff took me a good minute to get down and I even had to reach out to customer support at one point (they’re awesome though.) But ...maybe not the best organization of settings?
I want you to avoid having to go through that, so I’m breaking down where you can find this stuff and how it works.
Watch the short video to see it in action! Once you try it a couple times, it’ll become second nature. 🙂
SEPTEMBER 2023 UPDATE:
Squarespace has changed how you navigate to the design settings aka site styles, so what you see in the video tutorial below will be a little different from what you see in your Squarespace account.
To access the font settings, you’ll just click on the small paintbrush icon at the top right of any page, then click “Fonts”.
video tutorial breakdown
Access more fonts in Squarespace 7.1
First browse through the font pairings and find the one that most closely resembles the look you’re going for. To be honest though it doesn’t matter which one you choose, as long as you aren’t gonna keep switching around to other pairs. Then click the settings gear icon in the top right of that font combination’s little box.
Now you’re in the font playground! Select which type of text you want to change and go from there.
Where to change the navigation font and more
The Headings tab accounts for Headings 1, 2, 3, and 4. (In Squarespace 7.1 they are all set to be the same typeface.)
The Paragraphs tab takes care of Paragraph fonts 1, 2, and 3. (Again, in Squarespace 7.1 the typefaces for all Paragraph fonts are the same. The only thing that differs between them in the size.)
The Buttons tab is for the Small, Medium, and Large Button font settings.
In the Meta tab, you can change the font for all the miscellaneous text. This would include product prices, blog post tags, and “similar”. When in doubt, try changing the Meta font.
Under the Advanced tab is where you’ll find all the fonts in the header of your site, aka the navigation bar. So this includes that button at the top of your page if you have one, your Site Title if you’re not using a logo image, and the navigation menu itself.
View all the fonts available in Squarespace 7.1
Once you choose which type of text you want to change, you’ll then click “family” and “Browse All Fonts”. And alas, here is where they’ve been hiding!
You can either scroll through the list or type in what you’re looking for.
Wanna browse through your typeface options without having to scroll through the whole list?
Well you see, Squarespace fonts are just a mix of Adobe fonts and Google fonts. So you can check out their individual platforms and browse through, narrowing it down by the look you’re going for and seeing how your sample text would look when written in that font. Pretty cool huh!
Adding custom fonts in Squarespace 7.1
Now let’s say you wanted to make Heading 1 be a different font than Heading 2. OR you want to add in a font that’s not already available inside Squarespace.
This my friend would require custom CSS. I won’t go into depth on that today, so instead I’ll link a great tutorial from Kayleigh Noele (complete with a video walk-through!).
Have any questions about any of this? Drop it in the comments and I’ll be glad to help! 🙂
Oh, and if you haven’t signed up for Squarespace, feel free to use my code BEJ10 for 10% off.
