Good. I have full context on everything. The approach is:
fontFiles array (with url, format, weight, style) to TypographyItem so a typeface can provide remote font file URLs from Strapi.DynamicFontLoader component: A client component that reads the typography data, generates @font-face rules from the fontFiles URLs, and injects them into a <style> tag. This runs on mount so the fonts load dynamically.TypeSpecimen: Apply the actual custom font to the specimen preview text using inline fontFamily style.DynamicFontLoader in the brand page so all brand fonts are loaded when the page renders.Now update the mock data for "Neue Haas Grotesk" to include sample fontFiles entries (simulating what Strapi would provide):
Now let me also add fontFamily to the other typefaces so we can use the Google Fonts versions:
Now add a helper function to generate @font-face CSS from the data:
Now create the DynamicFontLoader component:
Now mount the DynamicFontLoader in the brand page content and update the typography section to apply the actual font to the specimen:
Now update the Typography section to apply the actual font to the specimen preview:
Now let me also add fontFamily as a hint in the header row of the specimen so users can see the CSS family name to use:
The system now handles custom fonts from any source (Strapi, CDN, etc.). Here's how it works:
Data model: Each TypographyItem can now optionally include a fontFiles array with { url, format, weight, style } entries. In production, these URLs come from Strapi's upload API. A fontFamily field defines the CSS family name used in @font-face rules and inline styles.
DynamicFontLoader component: Mounted once in BrandPageContent, it generates @font-face CSS rules from the fontFiles data and injects them into <head> at runtime. It also generates a Google Fonts <link> tag for typefaces that use Google Fonts. Both are cleaned up on unmount.
Typography specimen: Each typeface's preview text and weight showcase now render in the actual brand font via inline fontFamily style. Whether the font comes from a custom file or Google Fonts, the specimen shows the real typeface with all its weight variants.
Let me review the original spec and what we've built to give you a clear picture of what's next.
Perfecto. Aqui esta el resumen de lo que ya tenemos y lo que sigue:
Completado (Phase 1 - Frontend con mock data):
Fases siguientes segun el spec original:
lib/mock-data.ts con llamadas a la API de Strapi. Esto incluye: fetching de marcas, colores, logos, tipografias (con sus archivos), imagenes, voz y tono. Las rutas se alimentarian de datos reales y los assets (logos, imagenes, fonts) vendrian del media library de Strapi.#0a0a0a bg, #fafafa text). Se puede agregar toggle con next-themes.Cual de estas fases quieres abordar primero? Si vas a conectar Strapi te recomendaria empezar por definir bien el modelo de datos en Strapi y luego conectar el fetching, ya que el frontend esta listo para recibir datos dinamicos -- solo hay que reemplazar el mock por llamadas reales.
You can send messages while the preview loads