Skip to content

support custom font url in branding config#496

Draft
Coleton (Locrian24) wants to merge 1 commit into
masterfrom
font-uploading
Draft

support custom font url in branding config#496
Coleton (Locrian24) wants to merge 1 commit into
masterfrom
font-uploading

Conversation

@Locrian24
Copy link
Copy Markdown
Contributor

Description

Companion to the portalv2 PR adding custom font support to branding: https://github.com/saasquatch/saasquatch/pull/new/font-uploading

When BrandingConfiguration.main.customFontUrl is set, inject an @font-face block (registered under brandFont as the family name) via a <style id="brandFontStylesheet"> tag instead of the Google Fonts <link>. Format is inferred from the URL extension:

  • .woff2format("woff2")
  • .woffformat("woff")
  • .ttfformat("truetype")
  • .otfformat("opentype")
  • unknown extension → no format(...) (browser sniffs)

Both code paths (Google <link> and custom <style>) share the same DOM id so toggling modes replaces the element cleanly. customFontUrl is plumbed through parseBrandingConfig in global/styles.ts and the postMessage live-update path in global/global.ts for hot reloads from the editor.

Schema

main.customFontUrl?: string added to BrandingConfiguration in saasquatch.d.ts. Backward-compatible — existing configs without the field still take the Google Fonts path.

CSS variable

--sqm-primary-font continues to read from brandFont (the family name). Because the synthesized @font-face registers under that same name, no changes are needed in styles.ts's :root block.

How Has This Been Tested?

  • Type-check passes on changed files. Pre-existing unrelated errors not introduced by this change.
  • Manual (after portalv2 companion is wired): pick a Google font, confirm <link id="brandFontStylesheet"> is injected; switch to a custom URL/upload, confirm <style id="brandFontStylesheet"> with the right @font-face replaces it.
  • Manual: confirm format inference for .woff2, .ttf, .otf.

Checklist:

  • I have tested my changes locally
  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • My changes generate no new warnings or errors in the console

🤖 Generated with Claude Code

When BrandingConfiguration.main.customFontUrl is set, inject an
@font-face block (registered under brandFont as the family name) via a
<style id=brandFontStylesheet> tag instead of the Google Fonts <link>.
Format inferred from the URL extension (woff2/ttf/otf). Both paths share
the same DOM id so swapping modes replaces cleanly. customFontUrl is
plumbed through parseBrandingConfig and the postMessage live-update path
in global.ts.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

1 participant