¿Cómo autoalojar Google Fonts en Astra?

El tema Astra introduce una nueva función llamada Google Fonts autoalojadas disponible con la versión gratuita 3.6.0 del tema. Esta característica trae CLS y mejoras de rendimiento mediante la carga y el ahorro de las fuentes de Google a nivel local en el formato "woff2". Puedes ir a Astra> Configuración y activar la opción "Cargar Google Fonts localmente" para utilizar esta función. Más información sobre Google Fonts autoalojadas en nuestra sección Artículo de blog.

Aunque la función aporta grandes mejoras, es posible que tenga que hacer algunas modificaciones en situaciones específicas, en las que tenga que utilizar diferentes formatos de archivo de fuentes o en caso de que utilice Astra's función de marca blanca.

Este documento le mostrará cómo realizar estas modificaciones fácilmente.

Cómo modificar la función

Uno de los casos en los que necesitarás modificar la función "Google Fonts autoalojadas" es cuando el formato de archivo de fuentes "woff2" no se adapte lo mejor posible a tus necesidades. Por este motivo, hemos añadido un filtro para cambiar el formato de los archivos de fuentes, que se guardarán localmente. 

Además, esta nueva función crea una nueva carpeta de fuentes locales y un nuevo archivo CSS de fuentes locales. Ambos tienen las marcas Astra en sus nombres, que pueden cambiarse si se utiliza la función función de marca blanca. Puedes añadir un filtro para eliminar las marcas Astra y asignar los nombres que necesites.

Utilizando estos filtros, podrá realizar los cambios mencionados en su sitio web relacionados con esta función sin dejar de beneficiarse de todas las mejoras que aporta.

Antes de pasar a los filtros, es importante mencionar que es aconsejable tener un Child Theme instalado al añadir cualquier código personalizado a su sitio web. Si necesita más información sobre el uso de un Child Theme echa un vistazo a este artículo. Además, le sugerimos que intente hacer lo siguiente utilizando un entorno de puesta en escena y no directamente su sitio web en directo (de producción).

¿Cómo cargar archivos de fuentes en formatos distintos de "woff2"?

Aunque el "woff2" tiene sus ventajas, puede que no se adapte perfectamente a todos los sitios web. 

El formato "woff2" funcionará con alrededor de 96% de los navegadores utilizados actualmente. Sin embargo, algunos navegadores como Internet Explorer y Opera Mini no lo soportan. La solución para esto es cargar diferentes formatos de archivo de fuentes.

En este caso, sólo tendría que cambiar el formato de archivo de la fuente a "woff", que es un formato compatible con estos navegadores. 

Para cambiar el formato del archivo de fuentes a "woff", añada el siguiente filtro al archivo functions.php de su tema hijo:

// Cargar formatos de fuente distintos de "woff2"

add_filter( 'astra_local_google_fonts_format', 'update_astra_local_fonts_format' );
function update_astra_local_fonts_format( $font_format ) {
  $font_format = 'woff'; // Esto cambiará el formato a "woff" - también puede usar otro formato
  return $font_format;
}

Puede cambiar el formato del archivo de fuentes a cualquier otro también utilizando el mismo filtro - sólo tiene que sustituir "woff" por otro formato en esta línea del código del filtro:

$font_format = 'woff'; // Esto cambiará el formato a "woff"

¿Cómo poner esta función en marca blanca?

Como ya se ha mencionado, la función "Google Fonts autoalojadas" creará la carpeta de fuentes y el archivo CSS de fuentes locales, que contendrán las huellas de la afiliación a Astra en sus nombres. Si tus clientes inspeccionan el código o las carpetas del sitio web, podrán ver las marcas Astra mencionadas (y no tu propia marca). 

Si desea cambiar los nombres de la carpeta de fuentes y/o el archivo CSS de fuentes locales, puede hacerlo añadiendo los dos filtros siguientes al archivo functions.php de su tema hijo:

• Para cambiar el nombre de la carpeta de fuentes utilice este código:

// Actualizar el nombre del directorio 'astra-local-fonts' donde se ubicará el CSS de las fuentes.

add_filter( 'astra_local_fonts_directory_name', 'update_astra_local_fonts_file_directory_name' );
function update_astra_local_fonts_file_directory_name( $folder_name ) {
  $folder_name = 'mysite'; // Así que finalmente el nombre de su directorio local de fuentes será 'mysite'.
  return $carpeta_nombre;
}

• Para cambiar el nombre del archivo CSS de las fuentes locales utilice este código:

// Actualizar el nombre del archivo 'astra-local-fonts.css'.

add_filter( 'astra_local_font_file_name', 'update_astra_local_fonts_file_name' );
function actualizar_astra_local_fonts_nombre_archivo( 1TP21Nombre_archivo ) {
  $file_name = 'mysite-font'; // Así que finalmente el nombre de tu archivo local de fuentes será 'mysite-font.css'.
  return 1TP21Nombre_archivo;
}

Una vez que haya añadido los códigos, vaya a Astra > Ajustes y vacíe la caché local de fuentes haciendo clic en el botón "Borrar archivos de fuentes locales. Esto hará que los efectos de los códigos mencionados sean inmediatamente visibles.