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 Pages → Custom Code → 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?
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!
