feat: preload fonts

[asanehisa]

custom fonts (both static and variable) are preloaded.

The file paths to preload at are saved the in theme data under __customFontPreloads like:

[
    "/y-fonts/milkdays-regular.woff2",
    "/y-fonts/christmaslights-regular.woff2"
]

Screen.Recording.2026-02-04.at.1.10.07.PM.mov

See live site: https://jovially-similar-mongrel.pgsdemo.com/va/richmond/1101-wilson-blvd (you can hard refresh and custom fonts still don't flash)

[pkg-pr-new]

• pages-visual-editor-starter

  npm i https://pkg.pr.new/yext/visual-editor/@yext/visual-editor@1024
  

commit: 5e3d315

[coderabbitai]

Walkthrough

Adds optional custom font support across the visual editor: passes templateMetadata.customFonts into theme editor components, exposes customFonts props on ThemeEditorRightSidebar and ThemeFieldsSidebar, implements utilities to load/index font CSS and build deduplicated preload URL lists, stores preload URLs under __customFontPreloads in theme values, and updates applyTheme to inject tags before font stylesheet links while emitting only CSS-variable keys into the generated style tag.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant ThemeEditorRightSidebar
    participant ThemeFieldsSidebar
    participant CustomFontUtils as customFontPreloads
    participant applyTheme
    participant Browser

    User->>ThemeEditorRightSidebar: Open editor / select template
    ThemeEditorRightSidebar->>ThemeFieldsSidebar: Pass customFonts prop
    User->>ThemeFieldsSidebar: Change font selection / update theme
    ThemeFieldsSidebar->>CustomFontUtils: loadCustomFontCssIndex(customFonts)
    CustomFontUtils-->>ThemeFieldsSidebar: customFontCssIndex
    ThemeFieldsSidebar->>CustomFontUtils: buildCustomFontPreloads(themeConfig, themeValues, customFonts, customFontCssIndex)
    CustomFontUtils-->>ThemeFieldsSidebar: preload URL list
    ThemeFieldsSidebar->>ThemeFieldsSidebar: Store __customFontPreloads in theme values
    ThemeFieldsSidebar->>applyTheme: Apply theme (includes __customFontPreloads)
    applyTheme->>CustomFontUtils: getCustomFontPreloads(overrides)
    CustomFontUtils-->>applyTheme: preload URLs
    applyTheme->>Browser: Inject <link rel="preload"> tags
    applyTheme->>Browser: Inject font stylesheet <link> tags
    Browser-->>User: Fonts preloaded before stylesheet fetch/render

Loading

Possibly related PRs

• feat: show custom fonts in theme editor #923: Propagates templateMetadata.customFonts through editor components into theme configuration.
• feat: use custom fonts #932: Adds and wires customFonts support in theme editor components and font-loading utilities.
• feat: generate adjusted font fallbacks for smoother font loading #959: Modifies applyTheme behavior for font asset injection and head composition.

Suggested reviewers

• briantstephan
• jwartofsky-yext
• benlife5
• mkilpatrick

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately captures the main feature: preloading fonts for custom font files to prevent flash of unstyled text.
Description check	✅ Passed	The description is directly related to the changeset, explaining the custom font preloading feature with technical details and visual evidence.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch preload-fonts

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[benlife5]

Nice!