Using the CSS Editor

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

Last updated January 31, 2025

If you have coding knowledge and want to customize your site beyond the built-in styling options, you can add CSS code using the CSS Editor.

CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site.

Watch a video

Limitations

  • Review our recommendations on what you should and shouldn't change with CSS in our Custom code FAQ.
  • In version 7.0, 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.
  • 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.

Note

Custom code, including CSS, falls outside the scope of our support. This means we’re unable to help further with setup or troubleshooting. Additionally, with a code-based solution, we can’t guarantee its functionality or full compatibility with Squarespace. This includes how it functions with our responsive design, particularly its appearance on mobile devices, and if it functions on all templates. CSS customizations can also cause display issues with future updates to our platform. While we can't help further, there are many resources that can point you in the right direction:

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.

Line numbers display on the left to help you reference pieces of code. Syntax errors display at the bottom in red.

KB Guide Image

Upload files (optional)

Use the file upload area to upload assets for custom images or font 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 valid image and font files:

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

The field doesn't accept .svg files.

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.

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.
add-the-s.png
Footer Image
  • Get help from our community

  • Get help from our community on advanced customizations.

  • Hire a Squarespace Expert

  • Stand out online with the help of an experienced designer or developer.