ES 
EN 
FR 
Alojar Google Fonts localmente en WordPress con WPMasterToolKit
Google Fonts es una solución muy práctica para añadir fácilmente nuevas fuentes a un sitio web de WordPress. De hecho, muchos temas, creadores de páginas y plugins lo utilizan automáticamente.
El problema es que las fuentes suelen cargarse desde los servidores de Google. Por lo tanto, el navegador del visitante tiene que realizar solicitudes a dominios externos como fonts.googleapis.com y fonts.gstatic.com.
El módulo Fuente local de Google de WPMasterToolKit permite eliminar estas solicitudes en al alojar directamente las fuentes de Google Fonts en tu sitio web de WordPress.
El objetivo es doble: reducir la dependencia de servicios externos y facilitar una configuración en la que los archivos de fuentes se sirvan directamente desde tu propio dominio.
¿Qué plugin puede sustituir el módulo «Local Google Font»?
Existen numerosas extensiones de WordPress dedicadas exclusivamente al alojamiento local de Google Fonts.
El módulo Fuente local de Google permite satisfacer esta necesidad directamente desde WPMasterToolKit, sin tener que instalar una extensión adicional solo para esta función.
Esto se ajusta a la filosofía de WPMasterToolKit: reunir numerosas herramientas pequeñas de WordPress en un único complemento, cargando únicamente los módulos que estén realmente activados.
¿Cómo funciona el alojamiento local de Google Fonts?
Una integración clásica de Google Fonts suele realizarse en dos pasos.
WordPress carga primero una hoja de estilo desde:
fonts.googleapis.com
A continuación, esta hoja CSS contiene declaraciones @font-face en referencia a los archivos de fuentes alojados, entre otros, en:
fonts.gstatic.com
El módulo Fuente local de Google intercepta estas hojas de estilo y puede crear una copia totalmente local.
Cuando se detecta una fuente de Google Fonts, WPMasterToolKit recupera la hoja CSS correspondiente, identifica los archivos de fuentes necesarios y, a continuación, descarga los archivos WOFF2 en tu servidor.
A continuación, se genera una nueva hoja CSS para que apunte a esos archivos locales.
Una vez que esta versión esté disponible y validada, WPMasterToolKit sustituye automáticamente la URL original de Google Fonts por la URL de la hoja de estilo local.
Por lo tanto, el navegador del visitante ya no necesita recuperar esos recursos directamente de los servidores de Google.
Detección automática de las fuentes de Google utilizadas por WordPress
El módulo se integra en el sistema de carga de hojas de estilo de WordPress.
Cuando una hoja de estilo procedente de fonts.googleapis.com Si se encuentra, se registra automáticamente como una fuente de Google Fonts conocida por el módulo.
Esto permite, entre otras cosas, detectar las fuentes añadidas mediante los mecanismos estándar de WordPress por un tema o un complemento.
El módulo también conserva los identificadores de WordPress asociados, siempre que estén disponibles. De este modo, pueden mostrarse en el panel de administración para ayudar a identificar el origen de una fuente.
Solo las hojas de estilo HTTPS oficiales procedentes de fonts.googleapis.com/css o fonts.googleapis.com/css2 se aceptan.
Alojamiento automático de las nuevas fuentes detectadas
La opción Alojamiento automático permite alojar automáticamente una nueva fuente de Google Fonts en cuanto se detecta.
Esta opción está activada por defecto.
Por lo tanto, cuando aparece una nueva hoja de Google Fonts, WPMasterToolKit intenta recuperar inmediatamente los archivos necesarios y crear su versión local.
Si la generación se realiza correctamente, las próximas cargas utilizarán directamente la hoja de estilo local.
Si falla el alojamiento local, el módulo conserva la URL original en lugar de sustituir el recurso por una hoja incompleta. De este modo, el sitio web puede seguir utilizando la fuente existente de Google Fonts.
Escanear manualmente la página de inicio
Es posible que algunas fuentes aún no se hayan detectado desde que se activó el módulo.
Para facilitar su detección, la interfaz ofrece un botón Página de inicio de Scan.
A continuación, WPMasterToolKit realiza una solicitud a la página de inicio del sitio web y busca en su contenido las URL correspondientes a las hojas de estilo de Google Fonts.
Las nuevas fuentes encontradas se registran en el módulo y, a continuación, pueden alojarse localmente.
Esta función resulta especialmente útil justo después de activar el módulo para inicializar rápidamente la lista de fuentes de Google que se utilizan en la web.
Gestionar individualmente las fuentes de Google Fonts
Todas las fuentes detectadas se pueden ver en el panel de administración de WPMasterToolKit.
Para cada fuente, el módulo puede mostrar, entre otras cosas, su estado, las familias de fuentes detectadas, sus variantes, el número de archivos descargados, su tamaño total y la fecha de generación.
Hay tres estados principales que permiten saber rápidamente en qué situación se encuentra una fuente:
Descubierto significa que se ha detectado la hoja de Google Fonts, pero que actualmente no se está utilizando ninguna versión local válida.
Alojado localmente indica que se han descargado los archivos necesarios y que la versión local está lista.
Error en el alojamiento indica que se ha producido un error durante la generación.
Cuando se produce un error, este también se muestra en la interfaz.
Cargar una fuente local
Google puede actualizar los archivos asociados a una hoja de estilo o quizá simplemente quieras volver a generar los archivos locales.
El botón Recargar fuentes permite reiniciar la generación de una fuente ya alojada.
A continuación, WPMasterToolKit vuelve a descargar los recursos necesarios y genera una nueva versión del código fuente.
Esta nueva versión solo se utiliza una vez que se ha generado por completo.
Eliminar los archivos locales
Una fuente alojada también se puede eliminar individualmente mediante la acción Eliminar archivos alojados.
A continuación, se borran los archivos locales correspondientes y la fuente vuelve al estado en el que se encontró.
También es posible utilizar Eliminar todos los datos alojados para eliminar todos los archivos locales y las fuentes detectadas para el sitio actual.
El módulo vuelve a empezar con una lista de fuentes vacía.
Un cambio de tema también provoca una limpieza de estos datos. De este modo, se evita conservar las fuentes de Google que se han detectado para un tema que ya no está activo.
URL relativas o absolutas para las fuentes
El ajuste URL de fuentes generadas permite elegir la forma en que se hacen referencia a los archivos de fuentes en la hoja CSS generada.
Por defecto, WPMasterToolKit utiliza rutas relativas.
Por ejemplo, la hoja CSS local puede hacer referencia a un archivo situado en la misma carpeta con una URL de este tipo:
./font-file.woff2
Cuando esta opción está desactivada, se utiliza una URL completa que apunta al archivo local.
Si se modifica esta configuración, WPMasterToolKit vuelve a generar las hojas CSS de los archivos fuente ya disponibles para que utilicen inmediatamente el nuevo formato de URL.
Eliminación de las conexiones a Google que ya no son necesarias
Los temas o plugins de WordPress pueden añadir indicaciones de recursos como, por ejemplo: preconnect o dns-prefetch a Google Fonts.
Estas optimizaciones resultan útiles cuando las fuentes se descargan realmente desde Google, pero dejan de serlo cuando todas las fuentes conocidas están disponibles localmente.
Por lo tanto, WPMasterToolKit puede eliminar las indicaciones preconnect y dns-prefetch que apunta a:
fonts.googleapis.com
y:
fonts.gstatic.com
Esta eliminación se realiza con cautela deliberada: solo se lleva a cabo cuando Todas las fuentes de Google Fonts encontradas cuentan con una versión local válida.
Si aún queda alguna fuente por recuperar de Google, se conservan los datos de conexión.
¿Cómo se utiliza el módulo «Local Google Font»?
Empieza por activar Fuente local de Google desde la lista de módulos de WPMasterToolKit.
A continuación, puedes abrir su página de configuración.
En la mayoría de los casos, puedes conservar Alojamiento automático activado para que las nuevas fuentes de Google Fonts que se detecten se descarguen automáticamente en tu servidor.
A continuación, utiliza Página de inicio de Scan para buscar inmediatamente las fuentes de Google que aparecen en tu página de inicio.
Las distintas fuentes aparecerán en la lista. Podrás comprobar su estado y, si es necesario, utilizar Alojamiento local para iniciar manualmente su descarga.
Una vez que el código fuente está listo, WPMasterToolKit se encarga automáticamente de utilizar la hoja CSS local en lugar de la alojada por Google.
¿Dónde se almacenan las fuentes?
Los archivos generados se guardan en el directorio wp-content de WordPress, en un espacio reservado para WPMasterToolKit.
Cada sitio web tiene su propio directorio y, a su vez, cada fuente de Google Fonts tiene su propia carpeta.
Esta separación también está prevista para las instalaciones de WordPress multisitio: el identificador del sitio actual se incluye en la ruta de almacenamiento.
Cada generación contiene, entre otros, los archivos WOFF2 descargados y la hoja font.css utilizada por la web y un manifiesto en el que se describen los recursos de esta generación.
Nuestras decisiones técnicas para garantizar la fiabilidad del alojamiento local
La descarga automática de archivos remotos y la modificación de los recursos utilizados en el frontend requieren tomar algunas precauciones.
Por eso, el módulo no se limita a descargar una fuente y a sustituir inmediatamente su URL.
Validación rigurosa de las fuentes de Google Fonts
Las hojas de estilo aceptadas deben utilizar HTTPS y proceder exactamente de fonts.googleapis.com, en los dispositivos finales /css o /css2.
Se rechazan las URL que contengan identificadores, contraseñas o puertos personalizados.
Validación de los archivos de fuentes
Los archivos descargados también se comprueban.
El módulo trabaja con archivos WOFF2 y comprueba, entre otras cosas, su respuesta HTTP, su tipo de contenido (cuando se proporciona), su tamaño y su firma de archivo.
El tamaño máximo permitido para un archivo de fuente es de 5 MB, mientras que una fuente completa no puede superar 50 MB.
Estos límites permiten, entre otras cosas, evitar que una fuente inesperada provoque la descarga de cantidades excesivas de datos.
Generaciones inmutables
Cuando se reconstruye una fuente, WPMasterToolKit crea una nueva versión en una carpeta temporal.
Las fuentes, el archivo CSS y su manifiesto se preparan antes de que esta generación se convierta en la versión activa.
De este modo se evita, en la medida de lo posible, que se sirva una generación parcialmente construida durante una actualización.
El módulo también conserva un número limitado de generaciones anteriores y elimina las más antiguas.
Comprobación antes de su uso
Antes de sustituir una hoja de Google Fonts remota, WPMasterToolKit comprueba la generación local.
El manifiesto debe ser válido, debe existir el archivo CSS, deben existir los archivos de fuentes esperados y su tamaño debe coincidir con la información registrada.
La hoja CSS local tampoco debe contener ninguna referencia a fonts.gstatic.com.
Si estas comprobaciones fallan, la fuente local no se considera lista.
Protección contra operaciones simultáneas
El módulo también utiliza un sistema de bloqueo por fuente.
Por ejemplo, evita que dos solicitudes intenten reconstruir o eliminar simultáneamente los mismos archivos.
Estos bloqueos tienen una fecha de caducidad, de modo que un tratamiento interrumpido no pueda bloquear definitivamente una fuente.
Filtros disponibles para los desarrolladores
El módulo ofrece dos filtros de WPMasterToolKit que permiten a otras partes del sitio web o a los desarrolladores utilizar su mecanismo de detección y sustitución.
wpmastertoolkit/local_google_font/replace_url
Este filtro permite enviar al módulo una URL que podría corresponder a una hoja de estilo de Google Fonts.
$url = apply_filters(
'wpmastertoolkit/local_google_font/replace_url',
$url,
$handle
);
El primer parámetro corresponde a la URL de la hoja de estilo y el segundo, al identificador opcional asociado.
Si la URL no es una hoja de Google Fonts compatible, se devuelve tal cual.
Si se trata de una fuente de Google Fonts, el módulo la detecta y devuelve la versión local cuando hay una generación válida disponible. Con el alojamiento automático activado, el módulo también puede intentar generar esa versión local.
wpmastertoolkit/local_google_font/replace_in_content
Este filtro permite buscar las URL de Google Fonts que aparecen directamente en una cadena de caracteres:
$content = apply_filters(
'wpmastertoolkit/local_google_font/replace_in_content',
$content
);
A continuación, WPMasterToolKit busca las URL que se corresponden con fonts.googleapis.com/css o fonts.googleapis.com/css2 en el contenido y las procesa con su sistema de sustitución.
Esto puede resultar útil cuando una integración añade directamente una URL de Google Fonts en código HTML u otro tipo de contenido, en lugar de pasar por el sistema clásico de cola de estilos de WordPress.
Conclusión
El módulo Fuente local de Google de WPMasterToolKit permite convertir automáticamente las fuentes de Google remotas que utiliza WordPress en recursos alojados directamente en tu sitio web.
Detecta las hojas de estilo de Google Fonts, descarga los archivos WOFF2, genera el CSS local, comprueba la integridad de la generación y, a continuación, sustituye las URL remotas cuando hay disponible una versión local fiable.
El módulo también ofrece un análisis manual, una gestión detallada de las fuentes, la recarga de fuentes tipográficas, la limpieza de archivos y la eliminación de conexiones innecesarias a los servidores de Google.
De este modo, podrás conservar las fuentes de Google que utilizan tu tema o tus extensiones, al tiempo que reduces las dependencias externas y mantienes un mayor control sobre la forma en que se muestran estos recursos a los visitantes.