let’s keep them focused and make this migration clean and safe. Here’s a tight, PR-ready task list Replit can follow without breaking anything:

Font Chooser Migration → Logo Composer (Text tools)
1) Move/Reuse Components

Use these files:

components/logo/FontPicker.tsx (from your provided FontPicker.tsx)

lib/fonts.ts (from your provided fonts.ts, if needed later for pair suggestions)

Keep FontPicker exactly as-is for now—no global style changes.

2) Load Fonts (confirm)

Ensure Google Fonts are already linked in index.html (as your FontPicker expects).

If not, add the <link> tags for the families you expose in FONT_OPTIONS.

3) Integrate into Text Tools UI

In the Logo Composer Text tool panel (wherever users edit copy), insert:

<FontPicker
  value={textStyle.fontFamily}
  onChange={(font) => setTextStyle((s) => ({ ...s, fontFamily: font }))}
  sampleText={logoText || "Your Brand Name"}
/>


Keep existing controls (size, weight, spacing, etc.) unchanged.

4) Apply font live in the canvas

Wherever you render the logo text (SVG), set the font on the <text> nodes:

<text
  id="logo-text"
  style={{ fontFamily: `'${textStyle.fontFamily}', system-ui, sans-serif` }}
  // ...existing props
>
  {logoText}
</text>


If you have multiple text layers, apply the same fontFamily to each (or per-layer setting if supported).

5) Make exports respect the chosen font

Before exporting (SVG→PNG/JPEG/PDF/EPS), ensure the font is applied/inlined in the SVG string.

Helper (drop-in):

// lib/ensureFontLoaded.ts
export async function ensureFontLoaded(fontFamily: string) {
  try {
    // Wait for any pending font loads
    // @ts-ignore
    if (document?.fonts?.ready) await (document.fonts as any).ready;

    // Test a specific face/weight that you use in previews (common: 400/600/700)
    // Some browsers need a layout flush; measuring is usually enough.
    const test = new FontFaceObserver(fontFamily); // if you use fontfaceobserver, else skip
    if (typeof test?.load === "function") await test.load(null, 3000);
  } catch {
    // Soft-fail; exporters will use fallback if not loaded
  }
}


SVG inliner (minimal & safe):

// lib/svgInlineFont.ts
export function applyFontToSvg(svg: string, fontFamily: string, selector = "#logo-text") {
  const ff = fontFamily.includes(" ") ? `'${fontFamily}'` : fontFamily;
  // Add/merge a <style> block so every exporter sees it.
  if (!svg.includes("<style")) {
    svg = svg.replace("<svg", "<svg><style id=\"logo-inline-css\"></style>");
    svg = svg.replace("</svg>", "</style></svg>");
  }
  svg = svg.replace(
    /<style[^>]*>([\s\S]*?)<\/style>/,
    (_m, css) => `<style>${mergeCss(css || "", selector, `font-family:${ff},system-ui,sans-serif;`)}</style>`
  );
  return svg;
}

function mergeCss(css: string, selector: string, rule: string) {
  const re = new RegExp(`${selector}\\s*\\{[\\s\\S]*?\\}`, "m");
  const block = `${selector}{${rule}}`;
  return re.test(css) ? css.replace(re, block) : `${css}\n${block}\n`;
}


Export pipeline hook:

import { ensureFontLoaded } from "@/lib/ensureFontLoaded";
import { applyFontToSvg } from "@/lib/svgInlineFont";

export async function prepareSvgForExport(svgMarkup: string, fontFamily: string) {
  await ensureFontLoaded(fontFamily);
  return applyFontToSvg(svgMarkup, fontFamily, "#logo-text");
}


Then in your existing exporters:

const svgReady = await prepareSvgForExport(svgMarkup, textStyle.fontFamily);
// svgReady -> pass to svg->png/jpeg/pdf/eps converters

6) Persist selection for Brand Kit

When saving logo/brand, store the chosen font:

brandMeta.fonts = [textStyle.fontFamily];


In Brand Kit, remove the old Font Picker; instead display:

“Using font: Inter” (or whatever was chosen)

7) Remove the old chooser from Brand Kit

Delete (or disable) the Font Picker in the Brand Kit Generator UI.

Replace with read-only info pulled from saved metadata.

8) Edge cases & guards

Missing font: If a chosen font isn’t linked, the preview uses system-ui fallback. Keep the UI selectable, but consider a warning toast in dev mode.

Weights: Your FontPicker shows sample weights; ensure your CSS/links include those weights (e.g., 400/600/700).

PNG/JPEG exports: Always await ensureFontLoaded() before rasterizing to avoid fallback glyphs in the canvas.

Server-side export (if any): Embed fonts or pre-rasterize with a known renderer; for now, client-side only is fine.

9) Acceptance Criteria

Font choice appears inside the Text tools section.

Changing font updates live preview immediately.

Exported SVG/PNG/JPEG/PDF/EPS reflect the chosen font.

Brand Kit shows the selected font (no picker).

No global regressions in layout or styles.