Load the full free Google Fonts gallery in Zona de marca typography.

Browse ~1950 OFL fonts with search, category filters and live preview; one click adds a font to the brand kit.

Co-authored-by: Cursor <cursoragent@cursor.com>

src/components/BrandZone.tsx

@@ -30,6 +30,7 @@ import {
   type ColorToken,
   type FontToken,
 } from '@/lib/brandbook';
+import GoogleFontsGallery from '@/components/GoogleFontsGallery';
 
 function Field({
   label,
@@ -806,18 +807,47 @@ export default function BrandZone({ tenantLabel }: { tenantLabel: string }) {
                 </div>
               </div>
 
-              <div>
+              <div className="space-y-3">
+                <GoogleFontsGallery
+                  selectedFamilies={book.fonts_kit.map((f) => f.family)}
+                  onPick={(font, pickRole) => {
+                    const exists = book.fonts_kit.some(
+                      (f) =>
+                        f.family.toLowerCase() === font.family.toLowerCase()
+                    );
+                    if (exists) {
+                      setOkMsg(`${font.family} ya está en el kit`);
+                      return;
+                    }
+                    const weights = font.variants
+                      .filter((v) => /^\d+$/.test(v))
+                      .slice(0, 6)
+                      .join(',');
+                    const token: FontToken = {
+                      id: newId('font'),
+                      family: font.family,
+                      role: pickRole,
+                      weights: weights || '400,700',
+                      source: 'google',
+                      url_or_notes: `https://fonts.google.com/specimen/${encodeURIComponent(
+                        font.family.replace(/ /g, '+')
+                      )}`,
+                    };
+                    patch({ fonts_kit: [...book.fonts_kit, token] });
+                    setOkMsg(`${font.family} añadida al kit (${pickRole})`);
+                  }}
+                />
                 <div className="flex items-center justify-between mb-2">
                   <p className="text-sm font-semibold text-gray-900 inline-flex items-center gap-1.5">
                     <Type className="w-4 h-4 text-rose-500" />
-                    Tipografías
+                    Tipografías del kit
                   </p>
                   <button
                     type="button"
                     onClick={addFont}
                     className="text-xs font-semibold text-brand-700 inline-flex items-center gap-1"
                   >
-                    <Plus className="w-3.5 h-3.5" /> Añadir fuente
+                    <Plus className="w-3.5 h-3.5" /> Manual
                   </button>
                 </div>
                 <div className="space-y-2">