How to Change the Custom Font in the Product Title on Squarespace 7.1
Your product title is one of the first things shoppers read when they land on your Squarespace store. If it doesn’t resonate well with your brand’s style or typography, it can weaken the visual appeal and trust of the user.
Fortunately, Squarespace 7.1 enables full font personalization – whether via the style settings or custom CSS. In this guide, I introduce how to adjust the product title font with other available font types (built-in & custom).
Why Customize the Product Title Font?
A well-framed product title:
Brand your business
Enhances the reading experience across all of your devices
Improves your product grid/detail pages design.
Keeps text and images in alignment with one another
Tools Needed
A Squarespace 7.1 website
Access to Design → Custom CSS
( Optional - You can also use Google fonts) Google font URL or custom font file.
Method 1: Use Built-in Site Styles to Change the Font
If you have a Squarespace template that allows you to override fonts in Site Styles, start here:
Go to Design → Site Styles
Scroll to the Product Title Font section
Select a font from the dropdown box
Resize, weight, and space it appropriately
Save changes
Note: Some templates don't have a direct font control option for product titles, particularly custom and advanced designs.
Method 2: Apply Custom Font Using CSS
If built-in options don’t give you full control, here’s how to use Custom CSS.
Step 1: Identify the Product Title Selector
Paste this into Design → Custom CSS:
.ProductItem-details-title {
font-family: 'Georgia', serif;
}
This changes all product titles to Georgia.
Step 2: Use a Google Font
Want to use a modern font like Poppins?
1. Import the Google Font:
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap');
2. Apply it to the product title:
.ProductItem-details-title {
font-family: 'Poppins', sans-serif !important;
font-size: 24px;
font-weight: 600;
letter-spacing: 0.3px;
}
You can replace "Poppins" with any available Google Font (like Roboto, Lora, or Montserrat).
This gives your titles a clean, modern, and professional look.
Mobile-Friendly Considerations
Use a media query to adjust font size for mobile:
@media only screen and (max-width: 640px) {
.ProductItem-details-title {
font-size: 18px;
}
}
Bonus: Target Product Grid vs Product Page
Grid Title
.product-lists-item .grid-title {
font-family: 'Poppins', sans-serif !important;
}
Single Product Page Title:
.ProductItem-details-title {
font-family: 'Poppins', sans-serif !important;
}
Final Tips
Always test font changes on both desktop and mobile views.
Keep font pairings consistent across headings, body text, and buttons.
Avoid too many fonts — ideally, stick to one or two max.
Conclusion
Changing the font of your product titles in Squarespace 7.1 is a simple yet powerful way to reinforce your brand and improve user experience. Whether you use built-in settings or custom CSS, you can achieve a polished, on-brand store in just a few steps.
If you’d like help choosing a perfect font pairing or troubleshooting a specific Squarespace block, feel free to reach out to our team!
Frequently Asked Questions (FAQ)
1. Can I change the product title font without using code in Squarespace 7.1?
Yes! If your template supports it, you can change the product title font using Site Styles under Design → Site Styles. Look for the Product Title Font section to select a new font, adjust its size, weight, and spacing.
2. What if the Site Styles panel doesn't show product title font settings?
Not all Squarespace templates or custom layouts expose product title fonts in the Site Styles. In that case, you can still change the font using Custom CSS, which gives you full control.
3. How do I apply a Google Font to my product titles?
You can import a Google Font with this line of CSS:
@import url('https://fonts.googleapis.com/css2?family=FONTNAME&display=swap');
Then apply it like this:
.ProductItem-details-title {
font-family: 'FONTNAME', sans-serif !important;
}
Replace "FONTNAME" with the font you want, such as "Poppins" or "Montserrat".
4. Will this font change apply to both the product grid and individual product pages?
Not automatically. You need to target both selectors:
Product Grid Title:
.product-lists-item .grid-title {
font-family: 'YourFont', sans-serif !important;
}
Product Page Title:
.ProductItem-details-title {
font-family: 'YourFont', sans-serif !important;
}
5. Is it safe to use important in my CSS?
Yes, in this context, it’s necessary to override default Squarespace styles. Just be sure to use it only when required to avoid conflicts.
6. How can I make sure the font looks good on mobile?
Use a media query like this:
@media only screen and (max-width: 640px) {
.ProductItem-details-title {
font-size: 18px;
}
}
This ensures smaller, readable fonts on mobile devices.
7. Can I use a custom font file instead of Google Fonts?
Yes, if you have a web-safe custom font or uploaded font file, you can use @font-face in your CSS. However, Squarespace may have limitations based on plan and hosting.
8. How many fonts should I use on my store?
Ideally, stick to one or two fonts max for clean design and better performance. Use one for headings (like product titles) and one for body text.
9. Will changing the font affect SEO or loading speed?
Using standard or optimized Google Fonts has minimal impact. Just avoid using too many fonts or large custom files to keep your site fast and SEO-friendly.
10. I applied custom font CSS but don’t see any changes. What’s wrong?
Here are common issues:
The selector might be incorrect.
You forgot !important.
The font didn’t load correctly (check the import URL).
You’re viewing a cached version — try refreshing with Ctrl + Shift + R.
