Squarespace Custom CSS: Where It Is and Which Plan You Need

Squarespace's CSS editor is available on every plan, including Basic, and it's a different tool from Code Injection, which needs Core, Plus, or Advanced. The CSS editor is for changing fonts, colors, and backgrounds. Code Injection is for adding HTML and scripts, like a tracking pixel or a chat widget, to specific parts of the site. This guide covers where each tool actually lives, what plan gates apply, how to bring in an image or a font file for use in your CSS, and where Squarespace's own support draws the line. Everything here is from Squarespace's Help Center (checked September 2026), for version 7.1 — the one documented 7.0 difference is called out where it applies.

Where do I find the CSS editor?

Squarespace's own description is direct about the tool's job: "Use the CSS editor to customize your site beyond the built-in styling options with CSS code" (Squarespace, "Add custom CSS to your site", checked September 2026). To use it:

1. Open the Custom CSS panel.
2. Click Open in New Window if you want the editor in an expandable window — Squarespace notes this window "will close if you navigate away from the Custom CSS panel."
3. Add your code.
4. Click Save to publish your changes.

If the editor flags a syntax error, Squarespace explains why that can happen even when a CSS validator says the code is fine: its "CSS Editor syntax checking system is a parser, which tests what's going to work in different browsers," so it can flag a line a validator wouldn't.

Which plans allow custom CSS, and which need a paid plan for code?

This is the split that trips people up, because "custom code" isn't one feature with one plan gate — it's several tools with different rules. Squarespace's own custom-code overview lays out each one plainly (Squarespace, "Add custom code to your site", checked September 2026):

So the CSS editor itself is never the blocker — it's on Basic too. What actually needs an upgrade is JavaScript, iframes, and Code Injection. If your plan currently gates one of those and you're not sure what your plan includes otherwise, our Squarespace pricing guide breaks down what each tier unlocks.

One thing Squarespace states plainly and worth taking at face value: it doesn't support server-side code at all, on any plan. "Squarespace doesn't support server-side code, including PHP, Ruby, Ruby on Rails, and SQL." Custom CSS and Code Injection both work entirely in the browser; neither gives you a server to run anything on.

What's actually the difference between Custom CSS and Code Injection?

They solve different problems, and Squarespace's own descriptions make the split clear: "Use the CSS editor to customize your site beyond the built-in styling options. CSS should only be used to change fonts, colors, and backgrounds. Other CSS changes could potentially harm your site." Code Injection, by contrast, is described as a way to "add HTML and scripts that enhance specific parts of your site" — the examples Squarespace gives are live chat services, domain verification for a custom email service, and site analytics, not styling.

Our guide to Squarespace Code Injection covers exactly where each Code Injection field lands — header, footer, a single page, blog posts, the password lock screen, and the two post-checkout pages — and confirms Squarespace's own advice that CSS belongs in the CSS editor, not Code Injection, even though Code Injection technically accepts a <style> block. If your question is about styling, use the CSS editor. If it's about a script, tracking tag, or third-party embed, that's Code Injection or a code block instead.

How do I upload an image or font to use in my CSS?

The CSS editor has its own asset upload tool, separate from your site's regular media library, for files your CSS code needs to reference by URL:

1. Click Custom Files (in version 7.0, the button reads Manage Custom Files instead).
2. Click Add images or fonts, or drag files into the upload area. If the upload area doesn't open, Squarespace's tip is to check that pop-ups are enabled in your browser.
3. To use an uploaded file, place your cursor in the code where you need the URL and click the file. Squarespace explains the mechanism directly: "The CSS Editor automatically pastes the direct URL for that file so you can reference it in your code."

The Custom Files area accepts a fixed list of formats: .jpg, .png, .gif, .webp for images, and .ttf, .otf, .woff for fonts. If you're uploading a font specifically to use across your site's text (rather than referencing it inside custom CSS for something narrower), Squarespace points you to its separate font upload tool instead — covered in full, including supported formats and per-style upload rules, in our Squarespace fonts guide.

One easy-to-miss detail: file URLs are generated as either secure (https) or insecure (http), depending on whether SSL is enabled on your site at the time you upload. If you turn SSL on or off later, Squarespace recommends updating any file URLs already in your CSS to match — open the CSS editor, click Manage Custom Files, click the file, and change the URL to start with https.

Will my custom CSS survive a template switch?

This is the one place Squarespace documents a real 7.0-specific difference: "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." In other words, on 7.0, swapping templates doesn't delete your CSS — it just stops applying it until you switch back. Squarespace's page doesn't state an equivalent warning for 7.1, where templates work differently; if you're planning a template change on a 7.1 site, don't assume 7.0's behavior applies without checking your own site first.

What won't Squarespace support help with?

Squarespace is explicit that custom code, including CSS, sits outside its support scope: "Adding code to your site is an advanced modification that falls outside the scope of Squarespace support." The CSS editor's own page repeats the same boundary in narrower terms: "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."

For actual troubleshooting, Squarespace redirects you elsewhere rather than offering a support ticket:

• The Squarespace Forum, a peer-to-peer community.
• Squarespace Circle, described as "a community of creative professionals who may be able to answer more technical questions."
• A Squarespace Expert, if you don't have coding knowledge yourself and want someone else to do the work.
• A short list of third-party coding references Squarespace itself recommends for tutorials and syntax help, including W3Schools, MDN, and Stack Overflow.

If your code stops appearing rather than throwing a visible error, Squarespace's page on custom code lists specific known causes before you assume it's broken: being logged into your own site can hide code that runs over https:// (test in an incognito window instead), code placed on a page that's nested inside an index may not render, and Ajax loading can occasionally conflict with custom code, anchor links, and URL redirects. None of these require support intervention — they're conditions you can check and fix yourself.

What should I actually do if I need custom code beyond CSS?

• Just changing fonts, colors, or backgrounds? Use the CSS editor. It's on every plan, including Basic.
• Need a script, tracking tag, or third-party widget? That's Code Injection or a code block with JavaScript — both need Core, Plus, Advanced, or an eligible legacy plan. Check your current plan against Squarespace's pricing page if you're not sure which tier you're on.
• Need server-side logic — a database, a backend script, a custom form processor? Squarespace doesn't support that on any plan, on any version. That's a sign you need a different tool entirely, not a higher Squarespace plan.
• Something you added stopped working after a template or SSL change? Check the specific causes above (7.0 template switches, http/https file URLs, Ajax conflicts) before assuming it needs a rebuild.

Where does Figment fit in?

Nowhere directly — Figment publishes a website from a Figma design through its Figma plugin, and it has no CSS editor or Code Injection panel to compare against Squarespace's, since styling in that workflow happens in Figma itself before publishing. If your site already lives on Squarespace and you're trying to fix or extend its styling, the tools and limits above are the ones to work with directly.

Bottom line: the CSS editor is open on every Squarespace plan and is the right place for font, color, and background changes. Code Injection, and JavaScript inside a code block, need Core or higher. Squarespace will keep both tools running, but it won't debug what you write inside them — that's the forum, an Expert, or your own testing, not a support ticket.