How to Add Custom CSS Code in Squarespace: A Step-by-Step Guide

How to Add Custom CSS Code in Squarespace: A Step-by-Step Guide

By Michael Turner

February 1, 2025 at 06:48 AM

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

  1. Open the custom CSS panel
  2. Click "Open in a new window" for a collapsible editor
  3. Add your CSS code
  4. 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

  1. Open Custom Files in CSS Editor
  2. Click "Add Images or Fonts" or drag files
  3. 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:

  1. Open CSS Editor
  2. Click "Manage Custom Files"
  3. Click the file
  4. Update URL protocol (http/https)
  5. 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

Previous Articles