How to Customize Monospace Text in Squarespace 7.1
If you regularly share CSS, JavaScript, HTML, or code snippets on your Squarespace website, you've probably noticed the Monospace text option in the text editor. While it does a good job of distinguishing code from regular content, its default styling is fairly basic.
With a few lines of custom CSS, you can completely transform the appearance of monospace text to match your website's branding and improve readability.
In this tutorial, I'll show you how to customize monospace text in Squarespace 7.1.
Table of Contents
What is Monospace Text?
Monospace fonts give every character the same amount of horizontal space, making them ideal for displaying code, commands, file names, and keyboard shortcuts. Squarespace includes a built-in Monospace formatting option that you can access from the text editor's Format dropdown.
Step-by-Step Instructions
Step 1: Copy the code below and from the Squarespace dashboard navigate to Pages > Custom Code > Custom CSS and paste the code.
.sqs-block-html pre code {
color: #f6f2ef;
font-family: "Courier New", monospace;
font-size: 15px;
line-height: 1.6;
}
Key Takeaways
Custom styling makes your content:
Easier to read
More professional
Better aligned with your brand
More visually appealing for technical tutorials
Easier for visitors to distinguish between normal text and code
Small improvements like these can make a big difference if your website includes CSS snippets, JavaScript examples, or coding guides.
FAQs
Can I change the font used for monospace text?
Yes. Simply replace: font-family: "Courier New", monospace; with your preferred font.
Will this work on Squarespace 7.0?
No. This tutorial is written specifically for Squarespace 7.1. The HTML structure differs between versions, so additional CSS may be required for Squarespace 7.0.
Can I change the font colour?
Absolutely. Simply replace: color: #f6f2ef; with any colour you'd like.
Can I increase the font size?
Yes. Simply edit: font-size: 15px;
Does this affect every code snippet on my website?
Yes. The CSS applies site-wide to monospace text and code blocks. If you'd prefer to style only a specific page or section, you can target a page ID or section ID instead.
Can I use different colours to match my brand?
Yes. The background colour, text colour, border radius, padding, and font family can all be customised. This makes it easy to match your website's branding while improving the readability of code snippets.
Conclusion
Squarespace's built-in Monospace format is a great starting point, but it doesn't have to stay plain. By adding a little custom CSS, you can create attractive, easy-to-read code snippets that complement the rest of your site's design.
Whether you're publishing CSS tutorials, sharing HTML examples, or simply highlighting commands, customized monospace text helps your content stand out while improving the reader experience. Squarespace allows you to apply monospace formatting directly in the editor, and additional styling can be added through Custom CSS for complete control over its appearance.
If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.
All work in this guide is provided ‘as-is’. Other than as provided this guide makes no other warranties, expressed or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.
If you require professional advice, you can book our consultation services.
