El WPO cada día es una tarea más compleja debido a los elementos que integramos e incrustamos en nuestros sitios web, por un lado, y, por otro lado, las exigencias de los dispositivos móviles, que no paran de hacer que el WPO sea cada vez más estricto.
Hace algún tiempo, Google anuncio que la velocidad de carga en dispositivos móviles era un factor de posicionamiento para móviles, y hace relativamente poco tiempo, Google anuncio que la velocidad de carga era un factor de posicionamiento también en dispositivos desktop o escritorio.
Hay que aclarar, que existen otros factores de posicionamiento más relevantes dentro del SEO on Page, aunque una mala velocidad de carga puede limitar nuestro SEO y hacernos perder posiciones.
En el artículo anterior hable sobre como optimizar la carga de JavaScript y CSS, y en este artículo vamos a hablar sobre como optimizar la carga de Google Fonts, es decir, los archivos de fuentes que usamos en las letras y que se cargan desde el servicio Google Fonts.
Google Fonts es un repositorio o directorio de fuentes mantenido por Google desde el año 2010, siempre gratis.
Poco a poco se ha vuelto cada vez más popular, al mismo tiempo que cada vez tiene más fuentes y tipos de letra diferentes.
Los themes y plugins actuales que nos ayudan con temas visuales en WordPress nos permiten normalmente elegir tipografías de Google Fonts, pero no nos avisan de lo que eso implica para el WPO y para la velocidad de carga de un sitio web.
Para entender las dimensiones de uso de Google Fonts, podemos ver sus estadísticas oficiales actualizadas en tiempo real: https://fonts.google.com/analytics
Cuando desarrollamos y maquetamos un sitio web con WordPress, si no sabemos el impacto que tiene el uso de Google Fonts en el rendimiento, en muchos casos nos encontraremos con que usamos demasiadas fuentes de Google Fonts y normalmente para cargar las fuentes de Google Fonts se realizan varias peticiones externas a los servicios de Google, cuantas más fuentes se carguen, más peticiones se realizan.
Independientemente de que se realizan más peticiones externas, estas peticiones se realizan al hostname fonts.gstatic.com y en algunas ocasiones estos servidores no cargan lo suficientemente rápido.
No se hace una petición por cada tipografía o tipo de letra, sino que cada combinación de tipo de letra, grosor de letra y tamaño de letra, es una petición completamente diferente, por lo que, al utilizar distintos tamaños, negritas, cursivas y distintos tipos de letras, acabamos con webs que hacen muchas peticiones a Google Fonts, haciendo que el WPO general del sitio web se deteriore.
A continuación, en este post, vas a ver algunas formas de optimizar el uso de Google Fonts para que no penalice, o penalice lo mínimo la velocidad de carga del sitio web.
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
Limitar el uso de Google Fonts al desarrollar la web
Este lo he querido poner como punto inicial, ya que siempre pongo la prevención como base de todo y en este caso no iba a ser menos.
Si estamos desarrollando un sitio web o blog con WordPress con un theme actual (The7 o Bridge por ejemplo) o con un pagebuilder actual (Elementor o Visual Composer por ejemplo), debemos tener en cuenta lo que he expuesto en la primera parte de este artículo.
Con Elementor PageBuilder (el pagebuilder que a mí más me gusta y con el que está creado esta web) puedes cargar las fuentes de Google Fonts para que se realice la carga desde local.
Para esto utilizaremos la herramienta “Custom Font”:
Es decir, debemos de tener en cuenta que si usamos distintos tamaños de letra y distintas fuentes de Google Fonts (no predeterminadas) para el contenido, se realizaran MUCHAS peticiones a Google Fonts, por lo que se verá dañado el WPO de nuestro sitio web.
Si aún estamos a tiempo, ten cuidado, no uses muchas fuentes diferentes y si puedes, intenta utilizar fuentes predeterminadas del sistema como Times New Roman o Arial.
En caso de que ya sea demasiado tarde y quieras aplicar WPO a una web en producción o que ya está desarrollada, podemos avanzar a las siguientes partes de este artículo.
Precarga y prefetch DNS de Google Fonts
Podemos hacer una optimización leve de la carga de Google Fonts con la precarga y el prefetch DNS, dos funcionalidades que podemos hacer en navegadores compatibles siempre y cuando lo indiquemos en el código.
Lo primero que debemos hacer es identificar con Pingdom Tools o con cualquier otra herramienta las peticiones a Google Fonts.
Después de detectar estas peticiones, debemos copiar las URL y las vamos a utilizar tanto para la precarga como para el prefetch DNS.
¿Qué plugins podemos utilizar para hacer esto?
Tenemos varias formas de hacerlo, por un lado podemos hacerlo manual y por el otro automático.
Podemos hacerlo con los rel dns-prefetch y preconnect, aquí tienes los ejemplos:
| 1 | <link rel="dns-prefetch" href="//fonts.googleapis.com" /> |
| 1 | <link rel="preconnect" href="https://fonts.googleapis.com" /> |
Estos códigos o etiquetas deben ir en el head, es decir, entre las etiquetas <head> del sitio web. No te resultara difícil meterlas en un theme hijo o con alguna configuración del theme que permita introducir código en la cabecera fácilmente, ya que es el mismo mecanismo que cuando instalamos un pixel de Facebook o un pixel de Google Adwords.
Evidentemente, el navegador web del visitante debe ser compatible con estas funcionalidades para poder utilizarlas.
Pero si no sabemos dónde introducir estas líneas y no queremos liarnos, existen algunos plugins que nos permiten jugar con el prefetch DNS (cache DNS) y con el preconnect.
Podemos utilizar plugins como Perfmatters para WordPress, del que ya hemos hablado en otros artículos, o WP Rocket para WordPress, al igual que otros plugins para hacer prefetch DNS y preconnect como Pre Party Resource Hints, que podemos encontrar de forma gratuita en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/pre-party-browser-hints/
Tipos de fuentes, su peso y su compresión
Antes de entrar en materia de WPO para optimizar la carga de Google Fonts, vamos a explicar un poco de teoría sobre fuentes en entornos web.
Vamos a distinguir 4 formatos de fuentes que se diferencia en algunas de sus características:
- EOT: Se trata de un formato desarrollado por Microsoft y que solo se utiliza en los navegadores de Microsoft, por lo que tiene muy poca compatibilidad.
- TTF: Es un formato creado en 1980 y que fue expandiéndose. Actualmente es el más compatible junto a WOFF.
- WOFF: Es un formato creado en el año 2009 que incorpora compresión nativa para reducir el tamaño de las fuentes. Actualmente es el más compatible junto a TTF.
- WOFF2: Es una evolución de WOFF con una mejora del 30% en el tamaño de los archivos de fuentes y que poco a poco va siendo compatible con las nuevas versiones de la mayoría de navegadores web, excepto Internet Explorer.
No todos los formatos son compatibles con todos los navegadores web, por esa razón normalmente se plantean fuentes alternativas standard que se cargaran si fallan las principales.
Creo que esta tabla que he sacado del blog de KeyCDN (mi CDN favorito) puede ayudarte a discernir las compatibilidades y aunque se encuentra algo desactualizada en navegadores como Safari, sirve como ejemplo:
Normalmente como tipos de fuente fallback se utiliza Arial o Verdana, incluso Trebuchet MS o Tahoma.
Pero para que lo tengas en cuenta, el 86% de los navegadores utilizados actualmente son compatibles con el formato WOFF.
Carga de SOLO las letras que necesitamos de Google Fonts
Es algo curioso, pero es una cosa que podemos hacer: cargar SOLO y EXCLUSIVAMENTE las letras que necesitamos de una fuente y tamaño concreto.
Aunque no existe un plugin para hacer esto exactamente, podemos hacerlo en casos muy específicos con la etiqueta LINK de HTML, ya que no es precisamente practico.
| 1 | <link href='http://fonts.googleapis.com/css?family=Roboto+Condensed&subset=latin,greek' rel='stylesheet' type='text/css'> |
Al cargar solo algunas letras del tipo de fuente y tamaño necesario, el peso de la petición será bastante menor y el archivo resultante que se tiene que descargar en el navegador del visitante también será bastante más pequeño.
Recordemos que hay fuentes que cuando se descargan completas pueden ocupar 100 MB, aunque no es lo común.
Optimizar Google Fonts con OMGF Pro
Uno de los plugins que te puede ayudar a optimizar la carga de Google Fonts en WordPress es OMGF, tanto en la versión gratuita como en la versión de pago.
La mejor forma de explicarte el funcionamiento del plugin OMGF para WordPress, es con un video, y por eso he grabado un video para ti que he subido a mi canal de Youtube:
Aunque la versión gratuita de OMGF está algo limitada, se puede utilizar perfectamente y tiene bastantes funcionalidades.
Incluso la versión gratuita de OMGF nos permite detectar automáticamente las peticiones a Google Fonts para guardarlas en local, combinarlas y optimizarlas.
Además, OMGF también nos permite configurar el display de las fuentes, pudiendo configurar distintas opciones y siendo “Swap” la opción recomendada:
A la hora de utilizar el sistema automático de detección de fuentes, es importante tener en cuenta que debemos elegir una URL donde se carguen la mayoría de las fuentes, ya que en caso contrario puede quedarse alguna fuente sin optimizar:
Si elegimos el método de detección automático, el sistema nos listara las fuentes cargadas y nos permitirá excluirlas para que no se carguen o nos permite precargar.
En la pestaña “Ajuste de detección” tenemos algunas opciones más que no hay que tocar de forma predeterminada, aunque la mayoría están guardadas para la versión Pro de OMGF.
Además, tanto la versión gratuita como la de pago de OMGF nos permiten flexibilizar la configuración del plugin permitiéndonos cargar el archivo local combinado y optimizado con las fuentes desde nuestro CDN y también guardar los archivos en una carpeta que nosotros queramos:
OMGF nos permite configurar la optimización de Google Fonts en WordPress de forma casi automática, sin necesidad de configurar nada si no queremos.
La versión PRO nos activa automáticamente las opciones disponibles, que nos ayudan bastante con la optimización de Google Fonts.
Si quieres más información acerca de OMGF, puedes encontrarla en su web: https://alvaro.click/omgfpro
La versión gratuita de OMGF puedes encontrarla en el repositorio de plugins de WordPress: https://es.wordpress.org/plugins/host-webfonts-local/
OMGF gratuito VS OMGF Pro
Aunque pienso que con la versión gratuita de OMGF es más que suficiente en la mayoría de los casos, se puede mejorar la optimización de Google Fonts en WordPress con la versión Pro.
OMGF nos hace todo automáticamente, o podemos personalizar su funcionamiento, podemos elegir.
Este es el listado de funcionalidades y optimizaciones que tiene OMGF Pro frente a OMGF gratuito:
- Combinar y deduplicar las fuentes: La versión PRO nos permite combinar todas las peticiones a Google Fonts en una única petición local y además también nos permite eliminar peticiones duplicadas.
- Forzar subconjuntos: Con esto podemos forzar subconjuntos si fuese necesario para un determinado theme o plugin, yo aún no lo he tenido que utilizar nunca.
- Procesamiento avanzado: Con esta opción OMGF busca todas las fuentes registradas en el core de WordPress y usa esos datos para la optimización de Google Fonts.
- Procesamiento de las fuentes de Google: Nos permite optimizar las hojas de estilo cargadas desde fonts.googleapis.com y fonts.gstatic.com, además de todo lo cargado con @font-face y @import, y todo lo cargado con webfonts.js
- Eliminar las sugerencias de los recursos: Elimina todas las referencias de enlaces o resource hints a fonts.googleapis.com y fonts.gstatic.com, ya que al optimizar las fuentes y cachear en local no se necesitan.
Estas funciones nos permiten dejar todo perfecto en lo que a optimización de Google Fonts se refiere.
Si quieres comprar la versión PRO del plugin OMGF, puedes hacerlo en el siguiente enlace: https://alvaro.click/omgfpro
Como cargar Google Fonts desde local
¿Qué significa cargar Google Fonts desde local? Pues simple, descargar los archivos de Google Fonts al servidor o hosting de la web y cargar los archivos de fuentes directamente desde el hosting o servidor, es decir, sin hacer las peticiones a los servidores de Google.
Con esto conseguimos matar cuatro pájaros de un tiro:
- Por un lado, las peticiones se realizarán a nuestro propio hosting, por lo que tendremos control de las peticiones y será cosa nuestra (o al menos podremos hacer algo) si la carga va lenta.
- Por otro lado, al descargar los archivos de fuentes de Google Fonts a nuestro servidor, podremos personalizarlos, aplicando técnicas como por ejemplo el combinado de todas las fuentes en un único archivo y por lo tanto una única petición.
- Podemos especificar el cache de navegador (browser caching) de los archivos de Google Fonts, en caso de alojarse en los servidores de Google no podríamos.
- Cuando las fuentes están alojadas en local podremos aplicarles compresión GZIP para bajar su peso al servirlas a los visitantes.
Debemos de tener en cuenta que cuantas más peticiones a Google Fonts tengamos, mejores resultados en el terreno del WPO obtendremos al aplicar técnicas WPO sobre la carga de Google Fonts.
Carga local de Google Fonts con Self-Hosted Google Fonts Pro
De las opciones que me he encontrado para realizar la tarea de optimización de carga de Google Fonts, el plugin Self-Hosted Google Fonts Pro es el más eficiente y completo.
Aunque se trata de un plugin Premium que podemos comprar en CodeCanyon (es decir, no es gratuito), nos permite hacer todo lo necesario:
- Descargar Google Fonts a local y cachearlas, renovando los archivos de fuentes cada cierto tiempo.
- Incrustar los archivos de Google Fonts en el CSS para mejorar el rendimiento.
- Cargar Google Fonts de forma asíncrona para mejorar la carga inicial del sitio web, mediante la funcionalidad Font-Display Behavior.
- Combinar todos los archivos de Google Fonts en un único archivo para reducir las peticiones realizadas.
- Permite precargar Google Fonts en navegadores web que permitan esta funcionalidad, ya que es relativamente nueva.
Self-Hosted Google Fonts detecta automáticamente las fuentes cargadas en los archivos de themes y plugins, también detecta fuentes en el CSS y en el HTML.
En el siguiente vídeo que he grabado para ti y he subido a mi canal de Youtube puedes ver como optimizar la carga de Google Fonts en WordPress con Self-Hosted Google Fonts:
Como puedes ver, el plugin es simple y tiene relativamente pocas opciones, no está pensado para usuarios principiantes, ya que para principiantes del WPO en WordPress existen muchas cosas que optimizar antes de optimizar la carga de Google Fonts.
Optimización de Google Fonts con WP Rocket
Como siempre en mis artículos, vuelvo a tocar WP Rocket, ya que este plugin me encanta. Por esta razón he escrito una guía completa de configuración de WP Rocket que puedes leer en este blog.
Desde hace tiempo WP Rocket lleva una opción para optimizar la carga de Google Fonts en WordPress, aunque según mi experiencia, no es una funcionalidad demasiado efectiva.
La teoría dice que WP Rocket combina varios archivos Google Fonts en un único archivo, pero para esto tendría que cachear en local las fuentes y combinar los archivos, del mismo modo que lo hace Self-Hosted Google Fonts Pro.
El problema es que en las tablas de carga de Pingdom Tools, nunca he llegado a ver que el plugin haga esto, en ningún caso.
Desconozco si es por alguna configuración que yo haya realizado mal, pero es que he estado buscando ayuda en la documentación oficial de WP Rocket y no he encontrado ninguna ayuda en ningún idioma.
Aun así, quería mencionarlo, ya que quizás te pueda servir de ayuda.
Optimizar la carga de Google Fonts con LiteSpeed Cache
En Raiola Networks utilizamos LiteSpeed como servidor web en todos nuestros servidores de hosting compartido, es decir, eso incluye desde hosting WordPress a hosting reseller y hosting avanzado.
El plugin de LiteSpeed Cache del que ya hablé en el blog de Raiola Networks solo funciona cuando el servidor tiene LiteSpeed instalado, pero tiene funcionalidades muy interesantes.
Este plugin no solo es para gestionar cache, sino que también nos permite cargar Google Fonts de forma asíncrona para que no interrumpa la carga de la web.
Esta funcionalidad también añadirá la URL de carga de Google Fonts a una etiqueta con el atributo preconnect.
Adicionalmente, podemos hacer que se desactiven TODAS las cargas de Google Fonts con la siguiente opción que aparece:
Desgraciadamente, el plugin de LiteSpeed Cache para WordPress no permite cargar Google Fonts desde local, es decir, descargando las fuentes directamente en el servidor.
Carga fuentes de Google Fonts con Any Font
Por último, quiero hablar de esta opción: un plugin para WordPress más o menos gratuito llamado Any Font (lo de más o menos lo explico al final).
El plugin Any Font para WordPress nos permite subir las fuentes que nosotros queramos desde nuestro ordenador y estas se añadirán automáticamente a la carga, aunque primer tenemos que descargarlas a nuestro ordenador, claro.
Any Font para WordPress no solo permite subir fuentes de Google Fonts, sino cualquier fuente de la cual tengamos archivo.
Después de subir las fuentes a WordPress con Any Font el plugin utiliza unos servidores externos para hacer la conversión a un formato admisible.
Para subirlas simplemente pulsamos el botón “Add Fonts” rodeado en rojo en la imagen siguiente:
Después de subir las fuentes, podemos asignarlas a distintas partes de la web con el botón “Asign Font” que hemos rodeado en verde en la imagen anterior.
Al pulsar el botón “Asign Font” nos desplegara algunas opciones para asignar la fuente a una parte del contenido:
Incluso con el cuadro “Custom Elements” podemos utilizar clases CSS o elementos CSS al que asignarles fuentes.
Las fuentes que subamos con Any Fonts las tendremos disponibles en el editor de WordPress y en cualquier parte donde se inserte el editor de WordPress, es decir, podremos utilizarlo con Elementor o con cualquier otro pagebuilder para WordPress:
Te voy a explicar una última cosa, y es que Any Fonts para WordPress SOLO es gratuito para 1 única fuente, es decir, si quieres subir varios archivos de fuentes, vas a tener que comprar una de las licencias disponibles en su sitio web que puedes encontrar aqui: https://dineshkarki.com.np/use-any-font
¿Quieres
recibir mis articulos?
No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.
27 comentarios
Con la opción de LSCache de desactivar todas las fuentes de google me pasa lo mismo que te pasa con la opción de WP-Rocket, sólo funciona en teoría. ?
Le doy para que las desactive todas, pero en pingdom siempre me marca la carga de la fuente.
Pues la verdad es que solo lo he probado una vez y me ha funcionando, no he llegado a probarlo mas, pero le pasare un ojo…
Con la opción de LSCache de desactivar todas las fuentes de google me pasa lo mismo que te pasa con la opción de WP-Rocket, sólo funciona en teoría. ?
Le doy para que las desactive todas, pero en pingdom siempre me marca la carga de la fuente.
Pues la verdad es que solo lo he probado una vez y me ha funcionando, no he llegado a probarlo mas, pero le pasare un ojo…
Enhorabuena por el artículo Álvaro. Mucho más completo que lo que suelo leer.
Sé que te centras sobre todo en WPO, pero tengo una web donde me gustaría unir todas las fuentes en 1 única. ¿Sabes como podría hacer esto fuera de WP? Un saludo!
Hola Marcelo, lo tienes “relativamente” fácil, ya que lo único que tienes que hacer es descargarlas a tu ordenador, unirlas todas en un archivo y posteriormente enlazarlas desde el CSS: https://cybmeta.com/font-fa…
El problema, es que para ser compatible con todo, hay que hacerlo con todos los formatos distintos y desconozco el proceso.
Genial! Más o menos así lo tengo implementado, pero sigo indagando a ver cómo puedo unirlas todas. Un saludo!
Ya me estaba dando por vencido, me apoyó mucho ello. Sin rodeos, claro y preciso. Gracias Álvaro.
Gracias a ti por tus palabras Paul!!!
Estoy teiendop problemas con uno de mis sitios donde utilizo fuentes alojadas en mi servidor, el asunto es que por lo que entiendo con cada visita se cargan los distintos archivos de la fuente y pues esto con una cantidad considerable de visitas acaba consumiendose el ancho de banda del servidor. Hay alguna manera de cachearlas Álvaro? O qué puedo hacer para solventar esto?
Hola Eudis, con un CDN podrías solucionarlo, por otro lado, si consigues implementar bien el browser cache para las fuentes, en visitas recurrentes no van a consumir ancho de banda ya que van a estar en el navegador del visitante. Aunque esto ultimo depende de como esten llamadas las fuentes desde el CSS.
Muchas gracias por responder Álvaro, en mi caso se trata de páginas orientadas a búsquedas informativas por lo que es común que no tenga visitas recurrentes y tenga un % de rebote relativamante alto así que entiendo que la solución irá por poner un cdn. Veré cómo hacerlo correctamente. De nuevo gracias
Puedes probar con CloudFlare, si no te convence, KeyCDN esta bien.
Buenas Alvaro,
He visto tu video y he descargado Google Fonts gracias primeramente por tu aporte…
lllevo un par de dias por no decir varios intentanto de resolver algo que me esta ocasionando un problema con el SEO de mi web…
actualmente esta en 99 por PageSpeed Insights… pero no logro solucionar que llegue a 100 por temas de unas fuentes segun me dicen en el hosting de mi web… te copio :::
Asegúrate de que el texto permanece visible mientras se carga la fuente web
Utiliza la característica de CSS “font-display” para que los usuarios vean el texto mientras se carga la fuente web.
y me arroja este enlace (https)://www.mi-web(.)com/wp-content/themes/Divi/core/admin/fonts/modules.ttf
y no se que hacer….
y por ultimo
Minimiza la profundidad de las solicitudes críticas
(https)://www.mi-web(.)com/wp-content/themes/Divi/core/admin/fonts/modules.ttf
y otras dos mas….
si me podrias indicar que hacer te lo agraceria en el alma…
un abrazo
Hola Alex, la verdad es que no se que decirte con tan pocos datos, ya que ni uso Divi ni soy partidario de utilizarlo debido a lo mal desarrollado que esta, y por lo tanto no se como carga las fuentes.
De todas formas, quizás esto te pueda ayudar: https://divi.help/threads/ttf-module-is-slowing-down-the-page.3062/
Si quieres hacer preload fácil, también puedes usar el plugin PreParty Resource Hints: https://alvarofontela.com/precarga-recursos-resource-hints-wpo/
No entiendo en que puede afectar a la velocidad de carga el tamaño de una tipografía ( font-size). Las tipografías son documentos vectoriales precisamente para que su tamaño sea independiente de la resolución y tamaño, En cambio el peso (font-weight) o el estilo (font-style) si porque en realidad carga otra tipografía de la misma familia. ¿Tienes algún enlace con información al respecto? Gracias.
Hola Quique, pues ha sido resultado de pruebas que hice hace tiempo en WPO, ahora mismo no soy capaz de decirte algo concreto, dame unos días para volver a hacer la prueba con distintos tamaños y si tienes razón lo corrijo.
Hola Amigo, excelente información… pero pensé que ibas a publicar como cargar las fuentes localmente y justo ahí anunciaste los plugins que lo hacen, me emocioné cuando escribiste esto:
“Con esto conseguimos matar cuatro pájaros de un tiro:”
Hola Jose, si lo que quieres es subir fotos de tu ordenador al servidor (WordPress), puedes hacerlo con este plugin: https://es.wordpress.org/plugins/use-any-font/
No se si te he entendido bien, pero me ha parecido que necesitabas eso.
hola alvaro e intentado ponerlo en header pero no me funciona??
https://eldiariodemof.com/
Hola Marcos, lo que sale en la captura es que no te hace el preload, pero no que no te las pone en el header.
Lo curioso, es que acabo de buscar esas dos fuentes en el código de tu web y no las encuentro, es decir, no encuentro las peticiones a esos archivos.
Puede que te este influyendo el Rocketloader de CloudFlare, puede dar problemas en algunos casos como estos al hacer carga asyncrona a la fuerza.
Si puedes, desactiva el rocketloader y mandame al form de contacto de esta web (alvarofontela.com/contacto) una captura de como tienes configurado el plugin.
Hola Alvaro, muchas gracias por el artículo. Solo preguntarte, Uso Elementor, entonces y puesto que a mi me da igual usar una fuente u otra, te parece bien que haga lo siguiente:
Theme->Personalizar->Tipografía->(Body, Header, Primary Navigation, Content, Widget, Footer)
a) Fuentes por defecto -> F1, F2,…., Fn
b) Fuentes de Google -> G1, G2,….., Gm
He elegido una de las fuentes “por defecto” por ejemplo F2
Y luego en los Ajustes de “Elementor” he activado la opción “Desactivar fuentes por defecto” para que coja la fuente definida en el Theme
Lo digo para no cargar las fuentes de Google y no tener que hacer peticiones a su servidor y con ello mejorar la velocidad gral de la web.
Muchas gracias
Hola Pablo, pues…la verdad es que no me pongo en situación, ya que yo en Elementor este menu “Theme->Personalizar->Tipografía” no lo utilizo y por lo tanto no se lo que implica.
(No me gustan nada los ajustes globales de Elementor)
Hola Álvaro cómo puedo hacer para que me permanezca visible mientras se carga la web la fuente que he introducido como local a Elementor y que solo me cargue esa fuente. Saludos desde Cuba, eres el mejor en lo que haces
Hola Alejandro, para eso debes usar SWAP en font-display, con eso cargara los textos con las fuentes predeterminadas mientras que no se cargan las personalizadas.
PD: Muchas gracias por tus palabras.
Hola Alvaro, muy buen artículo, ahora WpRocket tiene una apartado de precarga de fuentes de Google, pero en la ventana para escribir la url de la fuente en cuestión, ¿Cómo copio la url entera de la fuente para colocarla en la venta? Porque en Page speed la url de la fuente sale cortada y si le das la botón derecho baja un archivo. woff, con txt se abre con una cantidad ilegible de caracteres. Muchas gracias
Hola Jose Maria, lo idea es usar las herramientas de desarrollador de Google Chrome para sacar las URL de todos los recursos .woff y .woff2 cargados por tu web.