Google Fonts en WordPress

Google ofrece una gran variedad de fuentes con las que puedes embellecer tu sitio web. Y no solo eso: las Google Fonts son fáciles de descargar e integrar rápidamente en el backend de WordPress. Sin embargo, si descargas estas fuentes y las cargas desde los servidores de Google, saltan todas las alarmas de privacidad en la Unión Europea, ya que las fuentes se cargan desde esos mismos servidores de Google. Esto significa que, entre otras cosas, se transmiten datos como la dirección IP, el navegador y el referente a Google. Esto infringe la GDPR, ya que a) sucede en segundo plano y b) los usuarios no pueden aceptar ni rechazar este proceso activamente.

Carga desde servidores de Google en la UE no es conforme con la GDPR

GDPR, ¿qué es eso? Los veteranos ya lo saben, pero si recién empiezas a trabajar con sitios web, este término aparecerá a menudo. De hecho, pronto se convertirá en tu compañero inseparable. GDPR son las siglas de Reglamento General de Protección de Datos, que agrupa las normativas legales orientadas a proteger los datos personales de los usuarios de internet. En los sitios web, esto se regula mediante el aviso de cookies, que informa a los usuarios sobre los datos que se recopilan durante la visita y les da la opción de aceptar o rechazar dicho procesamiento. Si el usuario hace clic en «rechazar», el sitio web no puede almacenar datos como direcciones IP, duración de la visita, comportamiento de clics, etc. Sin consentimiento, no se puede hacer nada: la implementación de este aviso de cookies es obligatoria y protege a los administradores del sitio frente a consecuencias legales.

Sin embargo, cuando se utilizan Google Fonts, las fuentes se cargan automáticamente desde los servidores de Google, lo que no es conforme con la GDPR en la UE, ya que Google transfiere estos datos personales a EE. UU.

Transferencia de datos a EE. UU. – Problemático e ilegal

Según la definición de la UE, EE. UU. es un país tercero sin un nivel adecuado de protección de datos. De vez en cuando, los tribunales internacionales han invalidado esta definición, solo para volver a revocar sus decisiones poco después. Esto se debe a la legislación de EE. UU., como el Cloud Act, que permite a las autoridades estadounidenses acceder a los datos almacenados en empresas de EE. UU. (como Google), incluso si estos datos se encuentran físicamente fuera del país. Esto significa que todos los datos enviados a EE. UU. y almacenados por empresas estadounidenses están potencialmente expuestos al acceso de las autoridades de EE. UU. Esta situación va en contra de la GDPR, que tiene como objetivo asegurar que los datos personales estén protegidos dentro de la UE.

Usar Google Fonts de manera local y conforme a la GDPR

Si ya te has resignado a despedirte de tus fuentes favoritas, te tenemos buenas noticias. ¡No te preocupes! Hay una opción conforme a la GDPR para integrar todas las fuentes de Google de manera local y no tener que temer consecuencias legales. La clave está en descargar las Google Fonts y alojarlas localmente en tu servidor de WordPress. Recuerda que las fuentes de código abierto de Google pueden ser utilizadas en cualquier sitio web, ya sea comercial o privado.

Instrucciones paso a paso para alojar Google Fonts localmente

Integrar o alojar Google Fonts localmente requiere algunos pasos, pero no te preocupes, te hemos preparado una guía para que puedas integrar tus fuentes de manera exitosa y conforme con la GDPR, sin renunciar a tu diseño preferido en WordPress. Esto también garantizará la privacidad de tus usuarios, evitando accesos de terceros.

1. Identificar las Google Fonts utilizadas

Lo primero es identificar qué Google Fonts se están usando en su sitio de WordPress para saber exactamente cuáles está utilizando. Esto es especialmente importante si su sitio fue diseñado por un tercero y no sabe qué fuentes se han implementado. Tiene dos formas de hacerlo:

Mediante un plugin

Una opción es usar el plugin de WordPress OMGF, que es la abreviatura de «Optimize My Google Fonts». Puede descargarlo de forma gratuita desde el repositorio de plugins de WordPress. OMGF escanea su sitio web automáticamente en busca de fuentes de Google que se estén cargando desde servidores externos y le ofrece la opción de alojarlas localmente.

Mediante el código fuente

También puede buscar las Google Fonts en la configuración de su tema. En el panel de WordPress, vaya a Apariencia > Personalizar o a las Opciones del Tema. Dentro de las opciones de Tipografía o Fuentes, debería encontrar fuentes como Roboto o Lato si se están utilizando fuentes de Google.

Otra opción es acceder a Apariencia > Editor de temas en el backend de WordPress, y buscar en los archivos como functions.php o en los archivos CSS como style.css la URL de «fonts.googleapis.com». Esto le indicará qué fuentes está cargando el tema.

En la configuración del tema utilizado

También puede buscar las Google Fonts en la configuración de su tema. En el panel de WordPress, vaya a Apariencia > Personalizar o a las Opciones del Tema. Dentro de las opciones de Tipografía o Fuentes, debería encontrar fuentes como Roboto o Lato si se están utilizando fuentes de Google.

Otra opción es acceder a Apariencia > Editor de temas en el backend de WordPress, y buscar en los archivos como functions.php o en los archivos CSS como style.css la URL de «fonts.googleapis.com». Esto le indicará qué fuentes está cargando el tema.

2. Eliminar las Google Fonts de plugins y temas

Una vez que haya identificado cuántas y cuáles Google Fonts se están utilizando en su tema, el siguiente paso es eliminarlas. Y no se preocupe, no necesita ser un programador para hacerlo. Existe una solución fácil: el plugin Disable and Remove Google Fonts. Simplemente descárguelo e instálelo. Este plugin eliminará automáticamente todas las fuentes de Google de su sitio de WordPress sin necesidad de intervención adicional.

Verificación con la consola de desarrollo

Después de usar el plugin, es recomendable verificar que todas las fuentes de Google han sido eliminadas correctamente. Para hacerlo, puede usar la consola de desarrollo. En el panel de WordPress, vaya a Apariencia > Personalizar y presione Ctrl + U. Esto abrirá la consola de desarrollo, donde podrá ver todas las fuentes que se están cargando.

3. Descargar las Google Fonts necesarias

Ahora que ha desvinculado su sitio del servidor de Google, es hora de restaurar el estilo de las fuentes en su sitio, ya que no quiere usar las fuentes del sistema predeterminado de su tema. Para ello, descargue las fuentes necesarias de Google Fonts directamente desde el sitio oficial o use la herramienta Google Webfont Helper.

Seleccionar estilos o descargar toda la «familia» de fuentes

Al descargar, puede elegir descargar estilos individuales (como Regular, Cursiva o Negrita) de las fuentes, o bien toda la familia de fuentes. Es recomendable descargar solo los estilos específicos que necesita para evitar que los archivos de fuente sean demasiado grandes y ocupen espacio innecesario en su servidor.

Con la lista de fuentes que ha identificado previamente en su style.css, puede buscar fácilmente la fuente exacta en el formulario de búsqueda del sitio de Google Fonts y descargarla.

Convertir y cargar las fuentes

Las fuentes de Google se descargan en formato TrueType (.ttf), pero no puede cargarlas en su servidor en este formato. Debe convertirlas a uno de los siguientes formatos: .woff, .woff2 o .eot. Para ello, use la herramienta Google Webfont Helper, que le permitirá descargar las fuentes en el formato correcto.

Una vez que haya descargado las fuentes y el código CSS, puede cargarlas en el servidor de su sitio web a través de FTP. Asegúrese de almacenarlas en un subdirectorio de su Child Theme bajo la ruta /fonts o en el directorio estándar /wp-content/themes/fonts.

4. Instalar Google Fonts en el Child Theme

Finalmente, debe instalar las fuentes descargadas en su Child Theme de WordPress. Solo subir las fuentes al servidor no es suficiente, ya que WordPress o el navegador no sabrán que esas fuentes están disponibles o cómo usarlas.
Debe instalar las fuentes para que WordPress las reconozca y las asocie correctamente, y esto debe hacerse en el Child Theme, no en el tema principal. Si las instala en el tema principal y realiza cambios en el archivo style.css, estos cambios se sobrescribirán con cualquier actualización del tema. Al instalarlas en el Child Theme, sus ajustes estarán protegidos.

Hay dos opciones disponibles para instalar tus Google Fonts.

Descargar el CSS

Cuando descargue las fuentes de Google, también puede generar el código CSS necesario. Este código CSS se puede copiar desde el Google Webfont Helper y pegar en el archivo style.css de su Child Theme.

Asegúrese de que los rutas de los archivos de las fuentes estén configuradas correctamente en el CSS para que WordPress pueda encontrar las fuentes.

Modificar los archivos CSS

Una vez implementado el CSS, asegúrese de asignar las fuentes a los elementos correspondientes en el archivo style.css de su Child Theme.

Después de realizar estos cambios, actualice su Child Theme para asegurarse de que los ajustes se guarden correctamente.

Para comprobar si las fuentes de Google se han vinculado localmente, puede usar el plugin Remover Google Fonts References. Este plugin detectará cualquier fuente de Google restante después de borrar el caché y ejecutar el plugin.

Otra opción es usar el Google Fonts Checker de la página www.sicher3.de. Solo tiene que ingresar la URL de su sitio en el verificador y hacer clic en «verificar» para comprobar el estado.

Precaución con Google Maps

Aunque haya configurado su sitio correctamente con el aviso de cookies y haya vinculado las fuentes de Google de forma local, existe un pequeño inconveniente con Google Maps. Si tiene Google Maps integrado en su sitio, puede enfrentar problemas con la privacidad, ya que Google Maps utiliza la fuente Roboto, que se carga desde los servidores de Google.

Para evitar que esta fuente se cargue desde el servidor de Google, debe eliminarla utilizando un pequeño código JavaScript que puede agregar al archivo /js/norobotofontbymaps.js en el directorio del Child Theme.

El código sería:

¡var head = document.getElementsByTagName('head')[0];//Save the original method
var insertBefore = head.insertBefore;
// Replace it!
head.insertBefore = function (newElement, referenceElement) {
if (newElement.href &&
newElement.href.indexOf('//Fonts.googleapis.com/css?family=Roboto') > -1) {
console.info('Prevented Roboto from loading!');
return;
}
insertBefore.call(head, newElement, referenceElement);
};

Luego, debe agregar el siguiente código en el archivo functions.php de su Child Theme:


/*Prevent roboto Fonts loaded by google Maps api*/
$child_theme_url = get_stylesheet_directory_uri();
wp_register_script( 'norobotofontbymaps',
$child_theem_url.'/js/norobotofontbymaps.js', 'jquery', "1", true);
wp_enqueue_script ('norobotofontbymaps');