Google Fonts Local — Fuentes Autoalojadas RGPD (dffontmanager)

DF Font Manager aloja tus Google Fonts directamente en tu servidor PrestaShop: tus visitantes no vuelven a contactar con los servidores de Google (conformidad RGPD), y cambias la tipografía de tu tienda mediante simples reglas CSS, sin modificar un solo archivo del tema. El módulo gestiona la importación desde el catálogo de Google Fonts, el subsetting automático por alfabeto, la precarga del archivo crítico, la estrategia font-display y la subida de fuentes propias.

Instalación

1. En tu back office de PrestaShop, abre Módulos > Gestor de módulos.
2. Haz clic en Subir un módulo y suelta el archivo dffontmanager.zip.
3. Aparece una pestaña Gestor de fuentes bajo el menú Diseño: todo ocurre allí (el botón Configurar del módulo también redirige a ella).

El módulo se registra en tres hooks (displayHeader, actionFrontControllerSetMedia, actionOutputHTMLBefore) y crea dos tablas: las fuentes instaladas y las reglas de sustitución. Los archivos de fuentes se almacenan en modules/dffontmanager/views/fonts/ y la hoja de estilos generada en modules/dffontmanager/views/css/generated/ — comprueba que estas carpetas tienen permisos de escritura.

Ajustes generales

• Activar las fuentes autoalojadas — interruptor principal: carga la hoja de estilos generada y las etiquetas de precarga en el front office.
• Eliminar las llamadas externas a Google Fonts (RGPD) — limpia el HTML renderizado de la tienda: todas las etiquetas link que apuntan a fonts.googleapis.com o fonts.gstatic.com (hojas de estilo, preconnect, precargas) así como los @import inline correspondientes se eliminan antes de enviar la página. Esta opción es la que garantiza que ninguna petición llegue a Google, aunque tu tema u otro módulo la inyecte.
• Estrategia font-display — aplicada a todas las declaraciones @font-face generadas. swap (por defecto) mantiene el texto visible durante la carga; block, fallback, optional y auto están disponibles para necesidades específicas.

Importar una fuente de Google Fonts

1. En el panel Importar una fuente de Google, escribe al menos dos caracteres: el autocompletado recorre el catálogo completo de Google Fonts, cacheado 7 días en tu servidor (botón de actualización junto al campo).
2. Selecciona una familia: se muestran las variantes disponibles (grosores 100 a 900, normal e itálica) y los alfabetos. Por defecto vienen premarcados los grosores 400 y 700 y los subsets latin + latin-ext.
3. Haz clic en Importar localmente.

El módulo consulta entonces la API CSS de Google, descarga los archivos woff2 oficiales correspondientes a tu selección (un archivo por alfabeto y variante), verifica su firma binaria, los guarda en views/fonts/nombre-de-la-familia/ y regenera la hoja de estilos. La página se recarga con la familia visible en la tabla de fuentes instaladas, con su peso total en disco.

El subsetting automático

Google divide cada fuente en archivos por alfabeto (latin, latin-ext, cirílico, griego, vietnamita, etc.). El módulo solo descarga los alfabetos marcados y conserva el unicode-range original de cada archivo en la declaración @font-face. El navegador solo solicita, por tanto, los rangos de caracteres realmente mostrados en la página: una tienda española típica sirve de 20 a 90 KB de fuentes en lugar de varios cientos.

Reimportar o modificar una familia

Para añadir un grosor o un alfabeto a una familia ya instalada, simplemente repite la importación con la nueva selección: los archivos antiguos de la familia se reemplazan y las reglas de sustitución que la usan permanecen intactas.

Subir una fuente propia

El panel Subida de fuente personalizada acepta los formatos woff2 (recomendado), woff, ttf y otf. Indica el nombre de la familia, el grosor y el estilo, y envía el archivo — un archivo por combinación grosor/estilo, fusionados automáticamente bajo la misma familia. Cada archivo se valida por su firma binaria (no por su extensión), y se integra en la hoja generada y en las reglas exactamente como una fuente de Google.

Gestionar las fuentes instaladas

La tabla de fuentes instaladas muestra para cada familia: la procedencia (google o custom), las variantes, los subsets, el número de archivos y su peso en disco, más dos interruptores:

• Activa — incluye o excluye la familia de la hoja de estilos generada (los archivos permanecen en disco).
• Precarga — ver la sección dedicada más abajo.

El botón de eliminación quita la familia, sus archivos en disco y todas las reglas que la usan, y reconstruye la hoja de estilos.

Reglas de sustitución

Aquí es donde aplicas tus fuentes sin tocar el tema. Cada regla asocia un selector CSS a una fuente instalada, con cuatro opciones:

• Grosor — fuerza un font-weight (déjalo vacío para heredar del tema);
• Estilo — normal o itálica (vacío para heredar);
• Pila de reserva — familias genéricas mostradas mientras la fuente no está cargada: sans-serif, serif, monospace o system-ui, sans-serif;
• !important — marcado por defecto, garantiza que la regla prevalezca sobre los estilos del tema sea cual sea su especificidad.

Ejemplos de selectores habituales:

• body — toda la tienda;
• h1, h2, h3, h4, h5, h6 — todos los títulos;
• .btn, button — los botones;
• .product-title, .h3.product-title — los títulos de producto en los listados (adáptalo a tu tema).

Cada adición o eliminación de regla reconstruye inmediatamente la hoja de estilos. La hoja se carga después del CSS del tema: incluso sin !important, tus reglas ganan la cascada a igual especificidad.

Precarga — buenas prácticas

El interruptor Precarga de una familia emite en la cabecera de la página una etiqueta link rel=preload as=font crossorigin para su archivo crítico, elegido automáticamente: woff2, estilo normal, alfabeto latin, grosor más cercano a 400. El navegador descarga así la fuente en paralelo al CSS, antes incluso de descubrir su uso — el texto definitivo se muestra antes.

Funcionamiento técnico

• La hoja generada fonts-v{marca-de-tiempo}.css contiene todas las declaraciones @font-face (con font-display y unicode-range) seguidas de las reglas de sustitución. Cada reconstrucción produce un nuevo nombre de archivo (cache-busting automático) y purga las versiones antiguas.
• Se registra mediante actionFrontControllerSetMedia con una prioridad que la sitúa después del CSS del tema.
• Las etiquetas de precarga las emite displayHeader; la lista de archivos críticos se cachea en configuración — ninguna consulta SQL adicional por página del front.
• La eliminación de llamadas externas se ejecuta en actionOutputHTMLBefore, sobre el HTML final, después de la caché de Smarty.
• El botón Reconstruir el CSS fuerza una regeneración completa — útil tras una intervención manual en los archivos o una restauración de copia de seguridad.

Verificar la conformidad RGPD

1. Abre tu tienda en una ventana de navegación privada.
2. Abre las herramientas de desarrollo (F12), pestaña Red, y filtra por fonts.g.
3. Recarga la página: la lista debe permanecer vacía. Si aparece una petición a fonts.googleapis.com o fonts.gstatic.com, activa la opción de eliminación de llamadas externas y vacía la caché de PrestaShop.

Prueba la página de inicio, una ficha de producto y el checkout: algunos módulos de pago o widgets de terceros cargan sus propias fuentes en iframes, fuera del alcance de la limpieza HTML (entonces se aplican sus propios banners de consentimiento).

Multitienda

Las fuentes importadas y las reglas de sustitución se comparten entre todas las tiendas de una misma instalación. Los interruptores de activación y la opción de eliminación de llamadas externas siguen el contexto de configuración estándar de PrestaShop.

Solución de problemas

• La fuente no se muestra en el front — comprueba en orden: el interruptor principal está activado, la familia está activa, existe una regla de sustitución para el selector correcto, y la caché de PrestaShop está vacía (Parámetros avanzados > Rendimiento). Después inspecciona el elemento en el navegador: si la regla aparece tachada, un estilo del tema más específico la sobrescribe — marca !important en la regla.
• La importación falla con un error de red — tu servidor debe poder alcanzar fonts.googleapis.com y fonts.gstatic.com en salida (cURL o allow_url_fopen). En un servidor tras un cortafuegos estricto, pide a tu proveedor de alojamiento la apertura de esos dos dominios.
• El autocompletado no sugiere nada — el catálogo no pudo descargarse (red). Haz clic en el botón de actualización del catálogo, o escribe el nombre exacto de la familia y pulsa Intro: la importación directa funciona sin el catálogo.
• Error de escritura al importar o reconstruir — concede permisos de escritura al servidor web en modules/dffontmanager/views/fonts/ y modules/dffontmanager/views/css/generated/.
• Persisten llamadas a Google pese a la opción de eliminación — identifica el origen en la pestaña Red (columna iniciador). Si procede de un iframe de terceros (pago, reseñas, mapas), la limpieza HTML no puede alcanzarlo: gobierna entonces el consentimiento de ese servicio de terceros.

Actualización del módulo

Desinstalación

La desinstalación elimina las dos tablas, las claves de configuración, los archivos de fuentes descargados y la hoja de estilos generada. Tu tienda recupera al instante las fuentes originales de su tema — sin residuos.