04.2 Google Fonts

En este tutorial aprenderás a optimizar Google Fonts en WordPress.

Las fuentes de Google pueden ser un verdadero quebradero de cabeza para la velocidad.

¿Por qué debería optimizar Google Fonts?

Te recomiendo optimizar las fuentes de Google por varios motivos:

    • Hace muchas peticiones, dependiendo del número de fuentes que uses.
    • Estas fuentes son externas, así que no se cachean, ni optimizan.
  • Da error de Add Expires headers en YSlow.

Optimizando las fuentes estas pesarán mucho menos, bajan algo las peticiones, pero lo más importantes es que las fuentes se cachearán.

Importante: a mayor número de fuentes usadas, mayor es la diferencia en la optimización.

Sin Google Fonts

Google Font sin optimizar

Fuentes de Google optimizadas

Cómo optimizar Google Fonts en WordPress

Simplemente deberemos realizar una tarea y es hacer las fuentes locales.

Gracias a esto:

  • Cargarán más rápido.
  • Se almacenarán en el navegador del usuario.
  • Eliminan el error Add Expires headers en YSlow.
  • Se podrán servir desde tu CDN.

Cómo hacer locales las fuentes de Google

Para ello usaremos el plugin OMGF | Host Google Fonts Locally.

Plugins que he usado y no funcionan:

Los pasos son:

  • Instala y activa el plugin OMGF | Host Google Fonts Locally.
  • Ve a ajustes – Optimize Google Fonts.
    • Comprueba que Optimization Mode esté en manual.
  • En Opción de visualización de la fuente, comprueba que esté en swap.
  • En la casilla de URL to Scan, añade tu web y pulsa la tecla intro. En el caso de que no detecte las fuentes, desactiva cualquier otro plugin de optimización de fuentes o ajuste de optimización de Google Fonts de plugins como WP Rocket. A veces puede tardar un poco si has limitado el cron de WordPress.
  • En Manage Optimized Google Fonts, marca la casilla de preload las que vayas a usar y Not load, las que no quieres que se carguen y guarda los cambios.
  • Importante: Si las fuentes dan error, desactiva preload y haz la precarga de fuentes con WP Rocket.
  • En caso de querer volver a lo anterior, simplemente vacía la caché desde la opción de Empty Cache Directory.

Vacía la caché

No te olvides de vaciar la caché del plugin, hosting y CDN.

De paso comprueba que no haya errores 404 en las fuentes con SpeedWP (Te lo indicaría).

Conclusión

Como has visto, optimizar las fuentes de Google es una tarea sencilla, pero además necesaria.

Con esto tu web irá mucho más rápida.

error: Este contenido está protegido
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

La ley afirma que podemos almacenar cookies en su dispositivo si son estrictamente necesarias para el funcionamiento de esta página. Para todos los demás tipos de cookies necesitamos su permiso.

Esta página utiliza tipos diferentes de cookies. Algunas cookies son colocadas por servicios de terceros que aparecen en nuestras páginas.  En cualquier momento puede cambiar o retirar su consentimiento desde la Declaración de cookies en nuestro sitio web.

Obtenga más información sobre quiénes somos, cómo puede contactarnos y cómo procesamos los datos personales en nuestra Política de Privacidad.

Al contactarnos respecto a su consentimiento, por favor, indique el ID y la fecha de su consentimiento.