Adding Custom Fonts to Squarespace 7.1: The Complete Guide

Education

30 Oct

When Squarespace introduced the Fluid Engine, it changed how layouts work on the platform. But a lot of designers still don't fully understand what it is, how it differs from the old Auto Layout, or how to leverage it properly.

The Fluid Engine is Squarespace's layout system for creating responsive, flexible sections. It's not a mystery. It's not overly complicated. But it does require a different mindset than thinking in fixed widths and pixel grids.

What Is the Fluid Engine, Actually?

The Fluid Engine is a flexible, grid-based layout system that automatically scales and rearranges content based on screen size. Instead of specifying exact pixel widths, you define relationships between elements. "This column should be twice as wide as that one." "This image should scale proportionally with its container." "These elements should stack on mobile and sit side-by-side on desktop."

The old Auto Layout system was more rigid. It had preset layouts: one column, two columns, three columns. You picked a layout and filled it. The Fluid Engine is more flexible. You create custom layouts with more control over spacing, proportions, and breakpoints.

The practical difference: the Fluid Engine lets you build more sophisticated, modern layouts without writing CSS. Auto Layout was fine for basic grids. The Fluid Engine handles asymmetric grids, overlapping content, and complex responsive behaviour.

Understanding the Grid System

The Fluid Engine uses a 12-column grid by default, but you don't need to think about it in those terms. Instead, think about proportions.

If you create a two-column layout, each column takes up 50% of the width. If you want one column to be twice as wide as another, you set their proportions as 2:1. Squarespace handles the actual grid maths.

When you add elements to a Fluid Engine section, you drag them onto the canvas and they snap to a grid. This grid is visual and helpful. It ensures alignment and consistent spacing.

On mobile, elements automatically stack vertically unless you tell them not to. Squarespace respects readability. Wide content doesn't try to stay wide on small screens just because you designed it that way on desktop.

Building Asymmetric Grid Layouts

One of the biggest advantages of the Fluid Engine is building asymmetric grids, where different sections have different layouts.

For example, a layout with a large image on the left and a narrow text column on the right. The image might take up 60% of the width, the text 40%. On tablet, the image drops to 55%. On mobile, both stack to 100% width.

To build this, create a section with the Fluid Engine enabled. Add two elements: one for the image (set its width to 60%), one for the text (40%). Squarespace automatically creates the grid proportions. Then you can adjust how things behave at different breakpoints.

Another example: a card grid where some cards are larger than others. Maybe your featured product card is 2x2 grid squares, and supporting product cards are 1x1. The Fluid Engine lets you create this without writing a single line of CSS.

Overlapping Elements and Layering

A common modern design pattern is overlapping elements: text overlaid on an image, or an image that bleeds off the edge. The Fluid Engine handles this with positioning controls.

When you add elements to a Fluid Engine section, you can control their positioning: normal flow, absolute, or relative. Absolute positioning lets elements overlap. This is how you create sophisticated layouts where content sits on top of images or where elements extend beyond the section's boundaries.

Here's a practical example: a hero section with a large background image and a title that overlaps the bottom portion. Add your image, set it to fill the section. Then add a text block with absolute positioning, positioned at the bottom. Squarespace lets you drag it to the exact position you want. The text overlays the image, creating visual interest.

The key is being intentional about layering. Use the positioning controls to set z-index and stacking order. Make sure overlapping text remains readable. Test on mobile to ensure overlaps don't break the layout or harm readability.

Responsive Behaviour at Different Breakpoints

The Fluid Engine respects responsive design. You can define different layouts at different screen sizes without writing CSS.

When you're editing a Fluid Engine section, click the responsive view icon (usually a phone or tablet icon in the editor) to see how your layout behaves at different widths. You can define breakpoints and control element widths, spacing, and visibility at each breakpoint.

This is powerful. You might have a three-column grid on desktop, but on tablet you want two columns, and on mobile you want one. The Fluid Engine lets you define all three without switching to code.

A common pattern: set your desktop layout to the layout you want. Then switch to mobile view and make sure everything stacks properly. Then check tablet view and adjust if needed. You're not writing media queries. You're just visually defining how the layout changes.

Common Layout Patterns Worth Using

The "image left, text right" pattern. Good for case studies, project showcases, testimonials. The image draws attention, the text provides context. Easy to understand, proven to work.

The "card grid with featured item" pattern. A larger card at the top or left, smaller cards filling the remaining space. Good for portfolios, product pages, or blog listings.

The "alternating layout" pattern. Image, text, image, text down the page. Keeps things visually interesting and prevents the page from feeling monotonous.

The "hero section with overlapping content" pattern. A full-width background image or video with text overlaid. The text is positioned to overlap the image slightly, creating depth and visual interest.

The "asymmetric grid" pattern. Different sized elements positioned irregularly. Feels modern and intentional. Requires careful alignment to avoid looking chaotic.

To implement these, start with a basic structure in the Fluid Engine editor, adjust spacing and proportions, then fine-tune the responsive behaviour at different breakpoints.

Limitations and Workarounds

The Fluid Engine is powerful, but it has limitations. Some things are still easier with CSS.

Limitation: the Fluid Engine doesn't support complex pseudo-elements or advanced CSS properties. If you need custom hover effects or conditional styling, you'll need to inject CSS.

Workaround: use CSS code blocks alongside Fluid Engine sections. Style the layout with the Fluid Engine, then layer in custom CSS for effects and polish.

Limitation: the Fluid Engine sometimes struggles with deeply nested layouts. If you try to create a complex layout with many nested sections, it can become slow or behave unexpectedly.

Workaround: keep layouts simple. If a section gets complex, split it into multiple sections. Squarespace's section system is flexible enough to handle this without creating alignment problems.

Limitation: some Squarespace blocks don't play nicely with the Fluid Engine. Form blocks, for instance, sometimes behave unexpectedly in certain positions.

Workaround: test thoroughly. Build your layout, then add blocks one at a time and test on all screen sizes. If something behaves unexpectedly, adjust the layout or use a different block.

When to Use Fluid Engine vs When CSS Is Better

Use the Fluid Engine for: basic to intermediate layouts, responsive grids, overlapping static content, layout patterns that don't require hover effects or animations.

Use CSS when you need: custom animations, complex hover states, advanced positioning, layouts so unique that the Fluid Engine feels limiting, performance optimisations that require low-level control.

In practice, most projects use both. The Fluid Engine handles the overall layout structure, and CSS adds the polish.

Tips for Building Layouts Faster

Start with a wireframe. Sketch your layout on paper or in a simple tool before building it in Squarespace. Know what you're building before you start placing elements.

Use spacing blocks. Empty spacing blocks help you create breathing room and visual rhythm. Don't just rely on element spacing.

Set width proportions first. Before worrying about styling, get the layout proportions right. Once the structure is solid, styling is easier.

Test on mobile early. Don't build the entire desktop layout and then think about mobile. Check mobile at each step. It's easier to fix issues as you go than to rebuild the mobile layout at the end.

Use Squarespace's built-in layout presets as starting points. Many sections come with preset layouts. Start with a preset, then customise it. It's faster than building from scratch.

Keep it simple. The most elegant layouts are often the simplest. Resist the urge to make everything complex. Clean structure, intentional spacing, and clear hierarchy usually outperform complex layouts.

Wrapping Up

The Fluid Engine is Squarespace's answer to flexible, modern layout design. It lets you build sophisticated grids, overlapping content, and responsive layouts without touching code. Learning to use it properly means you can build better-looking sites faster, and your clients get responsive layouts that work on every device.

Spend time learning the Fluid Engine. Experiment with asymmetric grids, overlapping content, and different breakpoint behaviours. It's one of Squarespace's most powerful features, and mastering it separates good designers from great ones.