How to Change Font on Squarespace & Add Custom Font?
Can you easily change font on Squarespace, taking your website from bland to brilliant in just a few clicks?
Yes, you can!
Because font choice isn’t just about style; it’s the silent ambassador of your website’s message, speaking volumes about your brand’s personality, professionalism, and ability to captivate your audience.
Our blog post aims to guide you on how to change fonts on Squarespace and add custom fonts easily. We also provide sneak peeks of the places our experts like to go for inspiration and the tools they use to find fonts that best showcase your brand’s personality. So, let’s get started.
Adding and Using Squarespace Fonts
To customize your site’s appearance, simply navigate to the paint brush icon located at the top right corner. This will grant you access to the site styles settings.
Among the various options available, you’ll find fonts categorized into different groups or buckets. One such group is designated for Headings, where each heading across your Squarespace site is assigned a single font by default.
Paint Brush > Site Styles> Fonts> Headings
Note: If you want different fonts for your website’s headings then skip to the later part of this guide where we explain how to add custom fonts on Squarespace website. You can add custom fonts to not only headings but also paragraphs, buttons, and other elements like tags and prices. Thus allowing you to tailor the font style to suit every aspect of your site’s design.
Changing Your Squarespace Website’s Title
Utilize the “assign styles” feature to fine-tune specific elements on your website. One common application that businesses often use this feature for is when they lack a logo. They use the “assign styles” feature to enhance the visibility of their site’s title by adjusting its font.
Paint Brush > Site Styles> Fonts> Assign Styles
Navigate to “assign style,” select the site title, and proceed to modify it. By default, the setting is typically aligned with the heading style, but you can switch to a custom style and select your preferred font family from Squarespace’s extensive library.
If you have a specific font, you can also incorporate it into your design. Keep in mind that different fonts offer various weights, which you can explore after choosing the font family.
You can apply the same process to customize fonts for headings (H2, H3, etc.).
Pro tip: Ensure that any changes you make to your site’s fonts maintain readability across all sections. It’s crucial to keep an eye on this aspect for a cohesive and user-friendly design.
There are some places that you might need custom css. For example, if you need to convert Heading 4 text to uppercase, standard Squarespace settings might not offer that capability. In such cases, employing custom code becomes necessary to achieve the desired styling, allowing you to customize elements beyond the platform’s built-in options.
If you require specific changes through custom code, you can explore plugin shops like these, which offer a plethora of free plugins. Check out the offerings at the provided link for potential solutions to meet your customization needs.
Webfont Inspiration For Squarespace Website
Pinterest is as an excellent resource for font inspiration. To explore various options, simply search for “website fonts” on Pinterest. Take note of fonts that resonate with the vibe you wish to convey through your website.
Once you’ve found a suitable font, verify if Squarespace offers it in their font library. If the exact font isn’t available on Squarespace, you can use Google to search for similar fonts. Look for alternatives that align with your preferences and are compatible with Squarespace’s font options.
Using the WhatFont Chrome Extension
Another tool for finding inspiration for your Squarespace website’s font is the WhatFont Chrome extension. By using this Chrome extension you can check out the fonts of your favorite websites.
For example, Immaculelab is a brand’s website. Via the WhatFont chrome extension we can see that they are using Arial font for their CTA button, “Create With Us”. Thus, using this extension you can scroll around any website and check what fonts they are using.
Benefits of Adding Custom Font on Squarespace Website
According to Linearity, “Over 65% of top ecommerce sites use custom fonts for branding.” Plus, small businesses spend an average of $300 per year on font licensing. These statistics indicate the importance of custom fonts in building a brand’s identity, digital presence, and overall brand strategy in a visually-driven global market.
Here are some benefits of adding custom fonts on Squarespace websites:
- Improves Your Website’s Visual Appeal
In a visually-driven digital world, custom fonts can allow businesses to create visually stunning designs that capture the visitors’ attention. By selecting fonts that complement their content and design aesthetic, users can improve their website’s overall look and feel, making it more visually appealing and professional.
- Differentiation
Squarespace offers a selection of pre-installed fonts, but many websites may end up using the same default options. By incorporating custom fonts, users can differentiate their website from others and create a more unique and memorable browsing experience for visitors.
- Flexibility and Control
Custom fonts give users greater flexibility and control over their website’s design. Users can experiment with different fonts to find the perfect combination that best represents their brand and effectively communicates their message.
How to Change Font on Squarespace
- Once you open your site you will see a dashboard. Click on the design tab and proceed as follow:
Design > Custom CSS > Manage Custom Files > Add Images/Fonts
- Manage Custom Files you will upload the font file that you want to use. Once your font file is uploaded, you have to add the code to the custom CSS panel.
- Begin by uploading the font file of your choice at the “Manage Custom Files” tab Once uploaded, you’ll need to insert the code into the custom CSS panel. This process enables you to add your desired font into your website.
- Here’s the code that you can copy paste in the CSS panel:
// CUSTOM FONT
@font-face {
font-family: ‘FONTNAME’;
src: url();
}
- In the FONTNAME, write the font name that you are currently using.
- Next click between the brackets written in the code above after the URL.
- Click back on Manage Custom Files, click on the font file that you have uploaded. The code will automatically be updated with the font file.
You won’t see any changes instantly because we still need to enter a small piece of code to start seeing those changes.This code can be for the website’s headings or paragraphs.
Squarespace 7.1 has four different headings and several paragraph fonts from which to choose . You can customize any of these. For example, if you want to update the website’s Heading 1. Copy and paste the second section of the code in the panel:
h1 {
font-family: ‘font-name’;
font-size: 20pt;
letter-spacing: 1px;
line-height: 140%;
}
You can use this code to customize your heading font, and change its font size, letter spacing and line-height. After adding this code, now you can see changes in your website’s heading in real-time.
Now that you have your font set up the way you want it you can hit the preview button and check that wherever you have written in the H1 heading , the font will be updated to the customized font.
Upgrade to Squarespace 7.1
Upgrading to Squarespace 7.1 offers a refreshed design system, improved editing experience and robust features to improve your website’s functionality and responsiveness.
Overall, your website experiences a boost in its performance and user experience. P.S. We all know how much a great user experience matters in turning your traffic to leads don’t we?
Will upgrading to Squarespace 7.1 affect my site’s SEO?
Potentially, yes. Whenever there are modifications made to the design or functionality of a website, it’s essential to consider the potential SEO implications. However, with proper planning and execution, the negative impacts can be mitigated or avoided entirely.
Tekglide’s Top-notch Squarespace Development Services
Squarespace 7.1 released in 2020 and after some initial resistance our clients’ fell in love with it. There aren’t very many reasons not to!
At Tekglide, we recognize that transitioning to Squarespace 7.1 may seem daunting at first. Many users are accustomed to Squarespace 7.0 and may hesitate due to the learning curve.
However, once they saw their 7.1 Squarespace website’s final look they felt it was totally worth the effort.
From the ease of use to the new “site style’s panel”, upgrading your website to 7.1 is so much more user-friendly and fun to work with, once you’ve learned how to use it.
Ready to give your Squarespace websitea fresh look or migrate to a new domain?
Look no further! Tekglide’s experts are here to seamlessly migrate and update your Squarespace website for a modernized online presence.
Conclusion
Your Squarespace website’s fonts can’t be understated or ignored because let’s face it they impact your brand’s identity and your website’s overall user experience. In a digital world, where visual appeals matter massively, your Squarespace website shouldn’t miss out on it. Whether you choose to add and use existing Squarespace fonts or add custom fonts, we hope this guide was helpful. If you are ready to update your current Squarespace website to 7.1 and don’t want to miss out on its brand new robust features, feel free to contact us.
