Adding Custom CSS in Squarespace

Custom CSS allows you to style fonts, colors, and backgrounds beyond Squarespace's built-in options. Here's how to use it effectively:

Adding CSS Code:

1. Navigate to Custom CSS menu
2. Click "Open in new window"
3. Add your code
4. Click "Save" to publish changes

Uploading Custom Files:

1. Click "Custom Files" under CSS Editor
2. Click "Add Images or Fonts" or drag files
3. Supported formats:
   • Images: .jpg, .png, .gif
   • Fonts: .ttf, .otf, .woff
   • Note: .svg files not supported

Using Custom Files in CSS:

1. Write your code up to the file reference point
2. Position cursor where URL is needed
3. Click the file to auto-insert URL

Important Notes:

• CSS is recommended only for styling fonts, colors, and backgrounds
• Custom CSS won't transfer when switching templates in version 7.0
• Built-in syntax checking flags potential browser compatibility issues
• SSL settings affect file URLs - update URLs when changing SSL status

Best Practices:

• Verify code formatting and syntax
• Check browser compatibility
• Keep backup of custom code
• Test changes in preview mode before publishing

Professional Help Options:

• Visit Squarespace forum for community support
• Hire Squarespace experts for custom solutions
• Consider Premium/Enterprise subscriptions for advanced needs

Related Articles

Previous Articles