Stand Out from the Crowd: Mastering Custom Fonts for Beginners
When it comes to creating a Squarespace website that stands out from the crowd, adding custom fonts to your site can really enhance your personal brand.
I’ll help you master the basics of custom fonts in Squarespace 7.1.
In this guide, we’ll cover:
Let's dive in and elevate your Squarespace website to the next level!
Why choosing the right custom font is important for your portfolio
Your Squarespace account gives you access to 600 Google fonts and 1,000 Adobe Fonts, according to Squarespace’s help desk.
While only a selection from both font libraries, that’s a lotta fonts. Having these fonts to use freely in your website design is a fantastic feature of the popular website builder.
But what if none of them feels right to you? In the vast world of typography, how do you go about choosing a typeface that matches…you?
In the online world of 2023, branding is super important, not just for businesses but for individuals wanting to establish an online presence. (And in 2023, everyone needs a professional online presence outside social media.)
It's essential to choose fonts that both enhance the overall user experience and align with your personal brand identity as a freelancer or contractor.
How many fonts should you use?
In web design, text on websites falls into 2 main categories: headings and paragraphs.
If you don’t have much experience with picking fonts for the web, a safe bet is to pick 2 typefaces. One for headings, one for paragraphs. Bolding and italicising also gives you 2 extra visual options.
Experiment with different font combinations to find the perfect balance between aesthetics and functionality. Pay close attention especially to your paragraph styles – is the text pleasant to read or are your eyes straining? Above all, readability should be one of your key priorities for picking web fonts.
Another tip – look for typefaces that come with a minimum of 3 variations, such as Regular, Medium and Bold. This will afford you greater design flexibility further down the line.
Best practices for choosing fonts
While custom fonts can add a touch of personality to your Squarespace website, it's important to use them wisely. Here are some best practices to keep in mind:
Prioritise readability — Ensure that your chosen custom fonts are easy to read, even on different screen sizes.
Test across devices — Preview your website on different devices and browsers to ensure that your fonts display correctly.
Pay attention to contrast — Make sure there is enough contrast between your text and background for optimal legibility and to improve accessibility.
Keep it consistent — Use the same font styles (such as bold or italic) consistently throughout your website for a unified look.
By following these best practices, you can make the most of your font choices and create a visually appealing website that leaves a lasting impression on your visitors.
Resources for finding and downloading custom fonts
Finding the perfect custom fonts for your Squarespace portfolio doesn't have to be a daunting task.
I won’t lie to you, though. Finding fonts can take time. Don’t feel bad if it takes you a while to find the font that best suits your website’s style and tone.
But when you do, it’ll all be worth it!
A word of CAUTION: Never use a font that you don’t have permission to use. Way back when I was in school, my friends and I loved downloading quirky free fonts from DaFont. We were tweens, so licences meant nothing to us.
But these are no longer the days! It's super important to check the licensing restrictions of the font you intend to download and use.
If a font has a free licence, check that it covers commercial projects and web use. With paid fonts, you may need to pay more if you have a higher number of site visitors.
There are numerous places on the web for discovering typefaces, both free and paid options.
Here are my personal favourite resources and free tools (perfect if you’re on a budget):
Google Fonts ↗ — My first go-to for fonts is Google Fonts because I don’t have to worry about licensing. They’re 100% free. As I’ve mentioned above, Squarespace doesn’t have every Google Font, so I might find the font that I want there.
BeFonts ↗ — I’ve recently discovered this great site for free font downloads. It gives you the convenient option to filter fonts for Commercial Use too.
Fonts Ninja Chrome extension ↗ — This nifty extension instantly detects font properties on the page that you’re on. It even links you to more info on the font, including its foundry and pricing. A real time saver.
Supported font formats in Squarespace
OTF, TTF, WOFF, WOFF2 – all of these file formats work in Squarespace.
If you have the choice, use WOFF2 (the new and improved version of the WOFF format) as it’s the most optimised for the web.
Picking the right file to upload
Your chosen font may come in different styles, each a separate file.
For example, say I want to add Space Grotesk. When I downloaded it from Google Fonts, it came with 5 static font files in TTF format, each a different style:
SpaceGrotesk-Light.ttf
SpaceGrotesk-Regular.ttf
SpaceGrotesk-Medium.ttf
SpaceGrotesk-SemiBold.ttf
SpaceGrotesk-Bold.ttf
Nowadays, we have what’s called variable fonts, where all styles can be packed into a single file to help speed up your site. Fewer font files = less font data.
Space Grotesk further comes in the variable font file:
SpaceGrotesk-VariableFont_wght.ttf
Brilliant. This is the file that we use on the Tempixel website without a problem. And it allows us flexibility to apply different styles.
Alternatively, if you don’t have a variable font, you’ll want to pick out which specific style(s) you’re going to use. For instance, with the font Mona, I might pick:
Mona-Sans-Regular.woff2
Mona-Sans-SemiBold.woff2
Locating the Custom CSS editor in Squarespace
Now that you have the files of your perfect chosen font, it's time to head to the Custom CSS editor where you’ll upload them.
Squarespace does like to enthusiastically reorganise its navigation menus. So this is where you can find the Custom CSS area as of October 2023.
Start by navigating to the Website panel in the Squarespace menu, left of your site preview.
Towards the bottom of the Website panel, find and click on Website Tools.
From there, click Custom CSS.
SHORTCUT: If you can’t remember where the CSS editor has gone, hit the forward slash key (/) on your keyboard to bring up the search bar. Then enter ‘CSS’.
Uploading custom fonts to your Squarespace website
Great, you’re in the Custom CSS editor. Let’s upload your font file(s).
Click the Custom Files dropdown in the left panel.
A small window will appear, prompting you to Add images or fonts. Here you can upload your font files from your computer.
How to change headings and paragraph fonts
STEP 1. SPECIFY A CUSTOM FONT WITH A RULE
Copy the following code into the Custom CSS editor. We’re going to add the @font-face rule. This declares what name you’ll refer to the font, and the location (source) of the file.
/*Custom fonts*/
@font-face {
font-family: name;
src: url(xxx);
}
In the code, replace name with the name of your font. This doesn’t have to exactly match the file name. Just a reference name will do, e.g. Space Grotesk.
Next, you’re going to replace xxx with the font file URL generated by Squarespace. To do this, place your cursor inside the brackets ( ), then click Custom Files.
Click the font you uploaded from the dropdown to insert the URL.
My example looks like this:
STEP 2. APPLY THE CUSTOM FONT
To achieve this, we need to add a bit more code. This is how we actually apply the style to an element.
Below are the CSS selectors for Squarespace 7.1:
h1 = Heading 1
h2 = Heading 2
h3 = Heading 3
h4 = Heading 4 (only available in 7.1)
p = All Paragraph fonts
p.sqsrte-large = Paragraph 1 / Large Paragraph (only available in 7.1)
p.sqsrte-small = Paragraph 3 / Small Paragraph (only available in 7.1)
Use ‘strong’ to target a bold style, for example:
strong = All bold text
h1 strong = Heading 1 bolded
p strong = All Paragraph fonts bolded
Use ‘em’ to target an italic style, for example:
em = All italicised text
h1 em = Heading 1 italicised
p.sqsrte-small em = Paragraph 1 italicised
Say, for instance, I want to override my Heading 1 font to Space Grotesk. Here is the code we add below the CSS we added in Step 1. Copy and paste this code:
h1 {
font-family: 'name'!important;
font-weight: xxx!important;
}
I replace name with ‘Space Grotesk’, enclosing it within single quotation marks.
Second, I replace xxx with the font weight I want to use, represented by a number. In this case, I want to use Space Grotesk Regular, which is 400. No need to panic. If you’ve gotten a font from say Google Fonts or a type foundry (i.e. the cool as name for a typeface design studio), the equivalent value will usually be displayed beside the weight name.
A screenshot of Google Fonts showing the weight name and numerical value.
If you don’t specify the font weight in CSS, that’s still OK. Squarespace will just use the weight you’ve chosen under Site Styles. Adding the font weight property just gives you extra control, like if you wanted to use a different weight for Heading 1 to your other headings.
PRO TIP: We use !important in our code to ensure it overrides any existing styling.
Once done, don't forget to save your changes!
Now, if the line height, letter spacing or font size looks odd after adding a custom font, head to the Site Styles panel (via the paintbrush icon) to tweak these settings.
Remember, with custom fonts, any Custom CSS changes won’t appear in your Site Styles panel. I.e. Space Grotesk is not going to show up in my Site Styles.
Want to customise multiple selectors?
Simply repeat Step 2, copying the code and replacing the CSS selector (h1, h2, p etc) and property values (name etc). You’ll end up with basically a ‘list of commands’ covering each element that you’re customising.
How to customise your Site Title font
Your site title is an essential element of your website and personal brand, so it's crucial to make it unique and eye-catching, particularly if you don’t have your own logo.
Building on top of what we’ve just learnt about changing headings and paragraph fonts, you may wish to customise your Site Title font beyond what’s available on Squarespace.
How do you do this? Use this code format:
#site-title {
font-family: 'name'!important;
font-weight: xxx!important;
}
Frequently asked questions
Q: Can I use any custom font on Squarespace?
A: Squarespace supports various font file formats: Web Open Font Format (.woff / .woff2), TrueType (.ttf) and OpenType (.otf). However, it's important to check the licensing restrictions of the font you intend to use.
Q: What is CSS?
A: CSS stands for Cascading Style Sheets. CSS is the language used to style a web page, versus HTML, the language that creates a website’s content and structure.
Elevate your Squarespace website with custom fonts
Congrats! You’ve now gained a foundational skill when it comes to using custom CSS on your website. By choosing the right fonts, uploading them to your Squarespace site and customising their display, you can create a visually stunning website that truly reflects your brand and impresses visitors.
Ready to level up your Squarespace website even further?
Leave your website in expert hands
