
How to Add Custom CSS Code in Squarespace: A Step-by-Step Guide
The CSS Editor allows you to apply custom CSS for advanced styling of fonts, colors, and backgrounds beyond Squarespace's built-in options. You'll need basic coding knowledge to use this feature effectively.
Important Limitations
- Use CSS only for fonts, colors, and backgrounds
- Custom CSS doesn't transfer between templates in version 7.0
- The built-in syntax checker validates browser compatibility
Adding Custom CSS
- Open the custom CSS panel
- Click "Open in a new window" for a collapsible editor
- Add your CSS code
- Click Save to publish changes
The editor displays line numbers for easy reference and highlights syntax errors in red.
Custom Files Feature Upload custom assets through the Custom Files section:
Supported file types:
- Images: .jpg, .png, .gif
- Fonts: .ttf, .otf, .woff
- Note: .svg files are not supported
Using Custom Files
- Open Custom Files in CSS Editor
- Click "Add Images or Fonts" or drag files
- To reference files in CSS:
- Position cursor where needed
- Click the file to auto-paste its URL
SSL Compatibility When changing SSL settings, update file URLs accordingly:
- Open CSS Editor
- Click "Manage Custom Files"
- Click the file
- Update URL protocol (http/https)
- Save changes
For additional support, consider:
- Consulting Squarespace Forum
- Hiring a Squarespace Expert
- Upgrading to premium/business plans
Always follow best practices for custom code implementation to maintain site stability and performance.
Related Articles

How to Connect a Squarespace Domain to Your Website
