Eventually Ticketing
Branding & Customization

Matching your Squarespace fonts in the Eventually widget

The branded Eventually widget loads fonts from synced brand data and, when needed, from curated Google Font families selected in Customize → Global Styles. Fonts on your Squarespace parent page still do not load into the widget on their own (the widget is a cross-origin iframe), so we inject a server-built @font-face block when brand sync captured a matching face, and can load a supported Google family when no synced face supplies it.

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, we inject 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. A family already supplied this way is not requested again from Google Fonts.

  • Built-in widget fonts: A curated set of Google Font families (such as Poppins, Inter, Roboto, and Montserrat) and web-safe faces. When you select a supported Google family for Headings or Body and brand sync did not already supply that family, the branded widget loads it from Google Fonts automatically, no custom CSS required. Body and heading families share one font stylesheet, and each family is requested only once.

  • No third-party font request: Web-safe fonts (such as Arial or Georgia) and Geist do not contact Google Fonts. Geist is self-hosted in the widget. Unsupported faces with no Google-hosted copy and no matching synced face also make no Google Fonts request.

When a supported Google family does need to load, visitors’ browsers contact fonts.googleapis.com and fonts.gstatic.com. That request is conditional: it happens only for the branded widget and only when the selected family needs a hosted copy. The stylesheet loads without blocking the widget, so an unavailable or blocked Google Fonts host does not prevent the widget from mounting. The widget can still fall back to a system font.

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, it falls back to a system font. This happens when the family has no supported hosted copy and no matching synced face (including many Adobe or Squarespace faces), the external font request is unavailable or blocked, malformed font data was skipped, or the face cannot be loaded. That fallback is silent in the widget itself.

Supported Google families selected in the Fonts group of Customize → Global Styles do not need a matching synced face or custom CSS to paint in the branded widget. They still fall back to a system font if the external request cannot complete.

In the Fonts group of Customize → Global Styles, fonts outside the widget’s built-in set show a notice when the font is not otherwise renderable:

Font Name falls back to a system font. Make it render.

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 Customize → Global Styles → Advanced → Custom CSS, then save the site-level CSS.

This notice is hidden when a matching synced or custom face, or a captured HTTPS face, already exists for the font.

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 an approved font host and update the snippet before pasting it into the widget builder. Approved hosts are the Squarespace CDNs, Google Fonts, Typekit, cdn.fonts.net, the Eventually asset host, and fonts uploaded through Eventually (served from Eventually’s own upload URL); a src pointing anywhere else is not rendered, even over https.

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

A custom CSS string can declare at most 12 @font-face blocks, and unicode-range is removed from font-face rules. Content the widget does not support is left out of the rendered CSS.

Replace Your Font Name with the exact font family and your-site.com/fonts/your-font.woff2 with the actual URL to your file, keeping the host on the approved list.

Was this helpful?
Was this helpful?