Como alojar Google Fonts localmente en WordPress

Cuando tu sitio WordPress carga Google Fonts desde fonts.googleapis.com, el navegador de cada visitante envia una peticion a los servidores de Google. Esta peticion incluye la direccion IP del visitante, su user agent, la URL de referencia y otros metadatos. Google recibe estos datos en cada carga de pagina, lo que crea una preocupacion importante en materia de privacidad bajo la legislacion europea de proteccion de datos.

Por que Google Fonts es un problema para el RGPD

En enero de 2022, un tribunal aleman (LG Munich, caso 3 O 17493/20) sentencio que incrustar Google Fonts mediante el enlace externo estandar constituye una infraccion del RGPD. El tribunal concluyo que transmitir la direccion IP de un visitante a Google sin consentimiento previo viola el articulo 6(1) del RGPD, porque el operador del sitio no tiene un interes legitimo que prevalezca sobre el derecho del usuario a la proteccion de datos. Se condeno al operador del sitio a pagar danos al visitante afectado.

Esta sentencia sento un precedente claro en toda la UE. Desde entonces, varios bufetes han enviado cartas de aviso masivas a operadores de sitios que siguen cargando Google Fonts externamente. La solucion es sencilla: alojar los archivos de fuente en tu propio servidor para que no se transmitan datos a Google. Este enfoque cumple plenamente con el RGPD, elimina el riesgo legal y a menudo mejora tambien la velocidad de carga.

Como descargar Google Fonts para autoalojarlas

La forma mas sencilla de obtener los archivos de fuente correctos con el CSS adecuado es la herramienta Google Webfonts Helper de Mario Ranftl. Asi se usa:

1. Abre Google Webfonts Helper y busca la fuente que necesitas (p. ej., "Open Sans", "Roboto", "Lato").
2. Selecciona los conjuntos de caracteres que necesitas. Para la mayoria de webs europeas, "latin" y "latin-ext" son suficientes. Anade "cyrillic" o "greek" solo si tu contenido usa realmente esos alfabetos.
3. Elige los pesos y estilos de fuente que utilizas en tu sitio. Las selecciones habituales son 400 (regular), 400 italic, 700 (bold) y 700 italic. Evita seleccionar pesos que no uses realmente, ya que cada uno anade tamano de archivo.
4. La herramienta genera reglas @font-face CSS listas para usar. Copialas. Puedes personalizar el prefijo de ruta de archivo para que coincida con la estructura de directorios de tu servidor.
5. Descarga el archivo zip que contiene todos los archivos de fuente seleccionados en formatos modernos (woff2 y woff).

Autoalojamiento manual paso a paso

Paso 1: subir los archivos de fuente

Crea un directorio fonts en la carpeta de tu tema o tema hijo y sube alli los archivos de fuente descargados:

/wp-content/themes/your-theme/fonts/
    open-sans-v40-latin-regular.woff2
    open-sans-v40-latin-regular.woff
    open-sans-v40-latin-700.woff2
    open-sans-v40-latin-700.woff

Si usas un tema hijo, coloca las fuentes en el directorio del tema hijo para que sobrevivan a las actualizaciones del tema padre.

Paso 2: anadir el CSS @font-face

Anade el CSS generado por Google Webfonts Helper a la hoja de estilos de tu tema o a un archivo CSS personalizado. Asegurate de establecer font-display: swap para que el texto siga siendo visible mientras se cargan las fuentes:

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-regular.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-regular.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-700.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-700.woff') format('woff');
}

@font-face {
    font-family: 'Open Sans';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/open-sans-v40-latin-italic.woff2') format('woff2'),
         url('../fonts/open-sans-v40-latin-italic.woff') format('woff');
}

Paso 3: eliminar la referencia externa a Google Fonts

Necesitas evitar que tu tema cargue fuentes desde fonts.googleapis.com. Esto suele hacerse desencolando el handle del estilo. El nombre del handle varia segun el tema, asi que puede que tengas que inspeccionar el codigo fuente HTML para encontrarlo:

add_action('wp_enqueue_scripts', function() {
    // Nombres de handle comunes usados por temas
    wp_dequeue_style('google-fonts');
    wp_deregister_style('google-fonts');

    // Algunos temas usan handles diferentes
    wp_dequeue_style('flavor-google-fonts');
    wp_deregister_style('flavor-google-fonts');

    // Tema Divi
    wp_dequeue_style('divi-fonts');
    wp_deregister_style('divi-fonts');
}, 100);

La prioridad 100 garantiza que este codigo se ejecute despues de que el tema haya encolado sus estilos. Si el tema usa un nombre de handle diferente, revisa el codigo fuente de tu pagina buscando una etiqueta <link> que contenga fonts.googleapis.com y anota el atributo id (quita el sufijo -css para obtener el nombre del handle).

Algunos temas escriben el enlace de Google Fonts directamente en la cabecera de la plantilla en lugar de usar wp_enqueue_style. En ese caso, puede que tengas que editar la plantilla del header o usar un tema hijo para sobrescribirlo.

Autoalojamiento mediante un plugin

Si prefieres no manejar manualmente los archivos de fuente y el CSS, hay plugins que pueden automatizar todo el proceso:

• OMGF (Optimize My Google Fonts): detecta automaticamente las Google Fonts cargadas en tu sitio, descarga los archivos de fuente a tu servidor, genera el CSS @font-face local y elimina las referencias externas a Google Fonts. Tambien precarga las fuentes para mejorar el rendimiento y gestiona el cache busting. Es la opcion mas popular para esta tarea concreta.
• Asset CleanUp (Pro): ademas de la optimizacion general de assets, puede detectar y alojar localmente Google Fonts. Ofrece mas control sobre que paginas cargan que fuentes, util en sitios donde diferentes secciones usan tipografia distinta.
• Perfmatters: incluye una funcion de Google Fonts locales junto con sus otras herramientas de optimizacion del rendimiento. Buena eleccion si quieres un unico plugin para varias mejoras de rendimiento.

Entender font-display: swap

La propiedad font-display: swap en tus reglas @font-face es importante para la experiencia de usuario y los Core Web Vitals. Sin ella, los navegadores pueden ocultar el texto hasta que la fuente termine de cargarse (lo que se conoce como FOIT, o Flash of Invisible Text). Con swap, el navegador muestra inmediatamente el texto con una fuente del sistema como respaldo y luego la sustituye una vez cargada la fuente personalizada. Esto evita que los layout shifts cuenten contra tu puntuacion de Cumulative Layout Shift (CLS) y garantiza que el contenido sea legible incluso en conexiones lentas.

Subsetting de fuentes para mejor rendimiento

Si quieres ir mas alla en la optimizacion, considera hacer subsetting de tus fuentes. Un archivo de fuente "Latin Extended" completo puede incluir caracteres para idiomas que nunca usas en tu sitio. Herramientas como fonttools (pyftsubset) o Everything Fonts Subsetter pueden eliminar caracteres no utilizados, reduciendo significativamente el tamano de archivo. Por ejemplo, un archivo de fuente que cubra todo Latin Extended podria pesar 25KB, pero un subset que contenga solo los caracteres usados en espanol e ingles podria estar por debajo de 15KB. Para la mayoria de sitios, los conjuntos de caracteres que ofrece Google Webfonts Helper ya son un subset razonable, asi que este paso es opcional.

Verificar que no queda ninguna peticion externa de fuentes

Despues de hacer tus cambios, es importante verificar que no quedan peticiones a fonts.googleapis.com ni a fonts.gstatic.com. Abre las herramientas de desarrollo de tu navegador (F12), ve a la pestana Red, recarga la pagina y filtra por "font" o busca "googleapis". Comprueba varias paginas, no solo la pagina de inicio, porque algunos temas cargan fuentes diferentes en plantillas de pagina diferentes.

Comprueba tambien las Google Fonts cargadas por plugins. Algunos page builders, plugins de slider o plugins de formularios cargan sus propias Google Fonts independientemente del tema. Puede que tengas que revisar los ajustes de cada plugin en busca de una opcion de "deshabilitar Google Fonts" o "cargar fuentes localmente".

Verifica con InspectWP

Ejecuta un nuevo escaneo de InspectWP despues de hacer tus cambios. La seccion RGPD de tu informe mostrara si quedan peticiones a los servidores de Google Fonts. InspectWP comprueba las conexiones tanto a fonts.googleapis.com (el CSS) como a fonts.gstatic.com (los propios archivos de fuente). Si todas las fuentes estan correctamente autoalojadas, ninguno de los dos dominios deberia aparecer en la lista de recursos externos.