How to customize monospace text in Squarespace 7.1

Hello there!

Do you share code snippets on your Squarespace website?

Are you wondering what’s the best way to display samples of your code?

If yes, I’ve got the perfect tutorial for you! 😄

To make code easier to read, they're usually styled differently from paragraphs. You'll notice that they commonly use a monospace font on a grey background.

Fortunately, Squarespace 7.1 already includes “Monospace” as a text format option. You'll be able to see it when you highlight text and choose an option from the Format drop-down menu:

If you want more control over the styling of this particular text format, you can do so with a few CSS lines. Here's how I customize monospace text in Squarespace 7.1:

1. Go to Design > Custom CSS

2. Enter the following code:

   .sqs-block-html pre code {
   padding: 4px;
   background-color: #f6f2ef;
   font-family: 'AnonPro-Bold' !important;
   font-size: 16px;
   }

   
   This basically targets the monospace text and adds a grey background to it. It also adds padding around the text so there's a little room to breathe from the background.

   
   Moreover, I've decided to add a custom monospace font that I got from Google Fonts. You can replace “AnonPro-Bold” with your chosen font style.
   

   By the way, the “Monospace” text format in Squarespace 7.1 follows the font size of “Paragraph 2”. If you want it to be smaller or larger than that, you can also change it by replacing “16px” in the code.
   

3. Click Save.

---

Hope this tutorial has helped you style your code snippets as you share them on your Squarespace website. I'd love to see how you've customized yours. Share them down below or send me a message! 😄

---

Enjoyed this article? Share it on Pinterest!