Customize accordion block font in Squarespace

Nov 21

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 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.

Video tutorial

 Code Example

Here is the code from this tutorial. =
If you want to change the font, remember that you can only use one you've already installed on your website.

Here are the codes from this tutorial:

/* change the font color for the entire accordion block *