Calling all bloggers! It’s time to level up your blog’s aesthetic with unique custom fonts. While scrolling through other blogs online (like this one!), you’ve probably noticed some pretty cool fonts that aren’t available in your Squarespace site’s settings. You ask yourself, how do I get these fun and aesthetic fonts to make my blog stand out?
WE’VE GOT YOUR ANSWER!
While Squarespace offers tons of impressive default fonts, which are great if you’re just publishing your site for the first time, it’s common for bloggers to want to add more customization to their sites to make their brand more distinct and engaging. Choosing custom fonts for your Squarespace site makes ALL THE DIFFERENCE when building a brand identity. You’ve carefully curated your color theme, site style, and logo; choosing a unique font is the cherry on the cake!
With the updated Squarespace 7.1 and our step-by-step guide, IT’S NEVER BEEN EASIER to upload fonts to the website-building platform. The hardest part of the whole process is deciding which custom font to use.
How To Add Fonts To Squarespace
Step 1: Upload your font.
After scrolling through the thousands of custom fonts on Creative Market and finally choosing the font you want to add to Squarespace, it’s time to upload the file.
Don’t worry; it’s simpler than you think!
Under the Design tab, click on Custom CSS.
Scroll to the bottom, click on Manage Custom Files, and upload the font file from your computer.
Step 2: Add the CSS code.
Now that you’ve added the font file, it’s time to add the CSS code to tell Squarespace where to find the font.
In the @font-face CSS code, you’ll want to change the name of the font family from “font title” to the name of the custom font you’ve chosen.
Keep it simple! This will make it easier for you to find your desired font later on.
Next, you’ll change the src URL. You’ll replace the FRONT URL text in the code with the URL of your added font file. To do this, simply delete the text FONT URL and leave your cursor blinking in the empty space between the apostrophes. Squarespace will automatically insert the uploaded font’s URL.
NOTE: If your cursor is on another area of the page, the URL will be inserted there instead of in the correct space. Simply delete the URL, place your cursor in the FONT URL space, go back to Manage Custom Files, click on the font file, and your URL is inserted!
Step 3: Assign your custom font to headings.
Alright, we’ve just told Squarespace where it can find your custom URL by changing the CSS code and src URL. Now, it’s time to tell Squarespace exactly how you want to use your custom font!
In this step, you’re going to tell Squarespace which font to use for your H1, H2, H3, H4, and paragraph text throughout your blog. All you have to do is replace the WHEREYOUWANTTOUSEFONT text in the CSS box with your desired placement. You can use the following instruction codes:
- Heading 1 – h1
- Heading 2 – h2
- Heading 3 – h3
- Heading 4 – h4
- Paragraph 1 – sqsrte-large
- Paragraph 2 – p
- Paragraph 3 – sqrste-small
To use your custom font for multiple text styles, simply add a comma between the codes like this: h1, h2, h3, p
Some bloggers even choose different fonts to use between their headings and paragraph texts, which you can totally do now that you know how to add custom fonts to Squarespace. If you want to know more about headings, here’s our guide to headings and SEO.
Step 4: Customize your font.
So, you’ve uploaded your font and told Squarespace where you want to use it, but did you know you can further customize it?!
Yep, you read that right.
In the font settings, you can change the letter spacing, font size, weight, line height, and weight.
While some fonts allow you to style them with the normal built-in Site Styles panel, others require a change to the CSS code snippet. And since you’re already in the Custom CSS settings, the customization is easy and seamless!
Some bloggers prefer to differentiate their H1 and H2 heading styles from one another. For example, you may want your H1 text to be heavier or a different text style, such as bold or italic, to stand out from the H2 and H3 headings. You can do this simply by changing the CSS properties of the text!
And there you have it, bloggers: a simple step-by-step guide on how to add fonts to Squarespace to make your blog stand out and match your carefully designed aesthetic!
Customizing and managing your blog or website is easier than you think with InfluencerSEO!
Getting into the technical and behind the scenes stuff of managing a blog or website, like how to add Google Analytics to Squarespace or how to change your website template, can be intimidating.
InfluencerSEO makes it easier for bloggers and influencers focus on their talents like content creation! while we handle the technicalities of ensuring your website looks great and works even better. With our Blog Tech Support package, you’ll feel confident that your website is updated, secure, and running efficiently.
Reach out to see how InfluencerSEO can help you grow your blog and your influencer brand today!
Jordan Becerra, founder and Lead SEO Strategist at InfluencerSEO, has spent almost 15 years in the creator internet space, the last nine building InfluencerSEO into the go-to SEO partner for content creators, with 500+ creators served from pre-launch to massive publication. She learned creator monetization and community building strategy from the inside working for Lauryn Bosstick of The Skinny Confidential prior to founding InfluencerSEO, so she understands both halves of the game: how search actually works AND how creators actually build a strong community online and make money. Her job now is to stay ahead of where search engine optimization is going, especially as AI rewrites the rules, and to make sure the creators she works with get there first.
Leave a Reply