How to customize Squarespace list item fonts
Here's what you'll find in this blog post:
→ Info about this tutorial
→ Video tutorial
→ Code example
→ Related content
About This Tutorial
This tutorial was recorded using Squarespace 7.1 and these codes will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
Squarespace offers some built-in customization for list sections. The Site Styles menu lets you change the font for list section titles, and the editor allows you to adjust list item font sizes. But if you crave a truly unique look for your list sections, with custom fonts for titles, descriptions, and even buttons, you’ll need the custom code covered in this video!
This tutorial unlocks the power of CSS to supercharge your list section style. With a little CSS magic, you can go beyond the basic options and create a list section that perfectly complements your overall website design.
Here's a heads-up: you can only use fonts that are already installed on your Squarespace site. To learn more about using a custom font on Squarespace, check out this helpful tutorial: insidethesquare.co/squarespace-tutorials/custom-font-in-squarespace.
Ready to dive in? This tutorial will guide you step-by-step through the process of using CSS to personalize your list sections. Plus, you'll find a treasure trove of code snippets directly beneath the video that you can adapt for your own site. I've also included additional resources to fuel your Squarespace customization journey.
So, ditch the generic list section look and unleash your creativity with the power of CSS!
Squarespace Tutorial
Code Example
Here are the codes from this tutorial; you'll need to combine them for your specific design:
/* simple list */
.user-items-list-simple
/* carousel list */
.user-items-list-carousel
/* banner slideshow list section */
.user-items-list-banner-slideshow
/* list item title */
.list-item-content__title
/* list item description */
.list-item-content__description
/* italic description text */
.list-item-content__description em
Don't forget to reset the font style with font-style:normal
/* bold description text */
.list-item-content__description strong
Don't forget to reset the font weight with font-weight:normal
/* list item button */
.list-item-content__button
Related Content
🔡 Add a custom font to Squarespace tutorial: insidethesquare.co/custom-font
📕 Free font & text property guide: insidethesquare.co/textguide
#️⃣ Block ID Chrome Extension (not affiliated, just a fan!): insidethesquare.co/chromeext
📑 My Squarespace code collection: insidethesquare.co/css
🙋♀️ Learn CSS for FREE: insidethesquare.co/learn
☕️ If you found this free tutorial helpful, you can buy me a coffee to say thanks: buymeacoffee.com/insidethesquare
