Customize accordion block font in Squarespace
This tutorial was recorded in Squarespace 7.1 and will not work on legacy sites built on version 7. For more information, visit insidethesquare.co/themes
The Accordion block is a fantastic feature that lets you organize and display content in a neat, collapsible format. Each accordion typically consists of a title that users click to expand or collapse the content beneath it. Unfortunately, we can’t customize much about the text in the Squarespace editor. But we can use CSS to make it uniquely yours.
In this tutorial, you'll learn how to change the font style and color of these accordion titles to match your website's unique look and feel.
You can adjust the font family to something that resonates with your brand, choose a color that complements your overall design scheme, and really make those accordion sections uniquely yours.
Here are the codes from this tutorial:
/* change the font color for the entire accordion block *
.accordion-item {color: red}
/* change the title font family */
.accordion-item__title {font-family: Serif}
/* Change the font family & color of the description */
.accordion-item__description {font-family: Serif; color: red}
⭐ Free Training: Squarespace CSS Basics
🔡 Free Guide: Font & Text Properties