Eventually Ticketing
Branding & Customization

Matching your Squarespace fonts in the Eventually widget

After a brand sync, the branded Eventually widget loads matching synced web fonts automatically inside its iframe. Fonts on your Squarespace parent page still do not load into the widget on their own — the widget is a cross-origin iframe — so Eventually injects a server-built @font-face block for the brand font the widget is using when a matching face was captured from your site.

How fonts load in the branded widget

The branded widget render (including the live branded preview on Set up your widget and the embed on your site) can load fonts in these ways:

  • Synced brand web fonts — When brand sync captures matching @font-face data for the heading or body family the widget uses, Eventually injects those rules into the widget HTML before any per-widget custom CSS, so the font family the widget requests can actually load. Host custom CSS can still override the result.

  • Built-in widget fonts — A curated set of Google Fonts and web-safe fonts the widget already knows how to paint, without needing a synced face or custom CSS.

This automatic font loading applies only inside the branded widget iframe. It does not change fonts on the Squarespace parent page.

What you see after brand sync

On first-publish setup and later branded previews, a successful sync can show your pulled colors, logo, and actual fonts in the live widget. The branded preview uses the same widget render path as the embed, so the font experience there matches what visitors see when brand is applied.

The neutral widget preview — the widget as it looks before a brand sync — does not load brand fonts or other branded styling. That unbranded render is also what you get when the widget is requested with ?brand=off.

When a font still falls back to a system font

If the widget cannot load the requested family — for example, no matching synced face, malformed font data was skipped, or the face cannot be loaded — it falls back to a system font. That fallback is silent in the widget itself.

In Settings → Brand, under Typography, fonts outside the widget’s built-in set still show a notice:

Font Name falls back to a system font in your widget — match it exactly

Expanding the notice reveals a copyable @font-face CSS snippet. Use that path when the branded widget still does not show the exact face you want, or when you want to force an exact match through custom CSS. Paste the snippet into Widget builder → Custom CSS — not Squarespace’s site-wide Custom CSS, which cannot reach inside the widget’s iframe.

Brand settings may still show this notice for fonts outside the built-in set even when a matching synced face is already loading automatically in the branded widget. Check the live branded widget preview first; use the snippet only if the face is still not rendering as expected.

If the snippet is already prefilled

When brand sync captured a matching font file from your site, the snippet includes the real src URL. The instruction reads:

src already points at the font file your site serves — paste as-is:

Click Copy snippet, paste it into the Advanced tab of your widget builder, and save. The widget then loads the font from the same source your Squarespace site uses, including Adobe Fonts kits or Squarespace-hosted font files.

If the snippet has a placeholder URL

When no matching font face is found, the instruction reads:

Point src at your licensed font file:

Replace the placeholder src URL with the actual URL to your licensed font file before pasting it into the widget builder.

Self-hosting the exact font

If the snippet has a placeholder URL, host the .woff2 file on your own server or CDN and update the snippet before pasting it into the widget builder. The widget’s CSS sanitizer allows @font-face rules with https src URLs.

@font-face {
  font-family: "Your Font Name";
  src: url("https://your-site.com/fonts/your-font.woff2") format("woff2");
  font-display: swap;
}

Replace Your Font Name with the exact font family and your-site.com/fonts/your-font.woff2 with the actual URL to your file.

Was this helpful?