Apply custom CSS to style fonts, colors, and backgrounds beyond Squarespace's built-in options.

Use the CSS editor to customize your site beyond the built-in styling options with CSS code. CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site. Review our recommendations on what you should and shouldn't change with CSS in our Custom code FAQ.

Note:

Custom code might break your site’s appearance or behavior, especially on mobile devices. Our support team can’t help you add custom code to your site or troubleshoot issues that arise from using it. We recommend these resources for more help:

1. The Squarespace forum
2. A Squarespace Expert

 

Watch a video

Will my custom CSS transfer over if I switch templates?

If you have a version 7.0 site, custom CSS doesn’t transfer when you switch templates. If you switch back to a previous template, the CSS you added to it will still be there.

I'm getting a syntax error on the CSS editor

Squarespace’s CSS Editor syntax checking system is a parser, which tests what's going to work in different browsers. Even if your code doesn’t return an error on a CSS validator, the parser will flag it if it thinks that a line may not work the way it's intended. If you see a syntax error, revise the CSS to ensure it’s written and formatted correctly and nothing’s missing.

Add CSS code

To add CSS code:

1. Open the Custom CSS panel.
2. To open the editor in an expandable window, click Open in New Window. The window will close if you navigate away from the Custom CSS panel.
3. Add your code.
4. When you're finished, click Save to publish your changes.

Upload files (optional)

You can upload assets for custom images in the CSS editor. If you're uploading a font, consider using the font upload tool.

To upload files:

1. Click Custom Files. (In version 7.0, the button text is Manage Custom Files).
2. Click Add images or fonts or drag files into that area to upload your file.

Tip: If the file upload area doesn't open, enable pop-ups in your browser.

Accepted file types

The Custom Files area accepts the following image and font files:

• .jpg
• .png
• .gif
• .ttf
• .otf
• .webp
• .woff

Using custom files

To use the files:

1. Write your code to the point where you need the file url to reference.
2. Leave the cursor where you want to place the URL in the code.
3. Click the file.
4. The CSS Editor automatically pastes the direct URL for that file so you can reference it in your code.

Custom files and SSL

The file's URL will be formatted as secure or insecure, depending on whether SSL is enabled. If you change your site's SSL preference, we recommend you update the file's URL to match. For example, if you enable SSL:

1. Open the CSS Editor.
2. Click Manage Custom Files.
3. Click the file.
4. Change the URL to start with https.
5. Click Save.