Cómo optimizar las Google Fonts en WordPress




¿Quieres aprender diseño y desarrollo en WordPress más avanzado? Échale un vistazo a mi Academia 🤓

En este vídeo-tutorial vemos cómo optimizar las Google Fonts en nuestro WordPress para cargar menos recursos y para que nuestra web cargue más rápido.

¿Quieres que me encargue de la velocidad de tu WordPress? Entra aquí 🙂

🔸 Suscríbete a mi canal (si quieres :P)🔸 :
❔¿Quieres contactar conmigo?❔ Mándame un mensaje a:

💡 Para consultar el código o más información visita💡:

Paso 1: Quitar fuentes innecesarias

El primer paso siempre sería quitar las fuentes innecesarias ya sean fuentes que no utilizamos o fuentes de las que podemos prescindir. Por ejemplo supongamos que en este caso me quiero quedar sólo con la Montserrat y la Roboto la voy a quitar, así que vamos a ver cómo lo hacemos. Como las fuentes normalmente las carga el theme, nos vamos a la carpeta del theme por FTP y abrimos el archivo functions.php. A partir de aquí el proceso puede ser un poco diferente, el código puede ser diferente dependiendo del theme que utilicéis pero se parecerá mucho a esta función de aquí, y sobre todo deberá llevar la función wp_enqueue_style que es la que permite cargar recursos CSS así que nos permite cargar las fuentes. En mi caso son estas dos líneas las que cargan las fuentes así que para quitar una de las fuentes vamos a comentar una de estas líneas. Véis que una es la que carga Montserrat y la otra carga Roboto así que la de Roboto la podemos borrar o simplemente comentarla. La voy a borrar en este caso y ya estamos. Ahora ya sólo se nos cargará una fuente y vamos a por el paso numero 2.

Paso 2: Corregir el CSS

Lo siguiente que tenemos que hacer es irnos a nuestro archivo style.css y quitar las referencias a la fuente que acabamos de quitar. Por ejemplo yo en este editor puedo hacer Ctrl + F y buscar “Roboto”. Como ya no la utilizamos y utilizamos Montserrat pues ponemos aquí Montserrat. Volvemos a buscar a ver si nos sale más veces y parece que no, sólo sale en los títulos. Ahora si recargamos la página véis que han cambiado los titulares y ahora en toda la página se carga la fuente Montserrat y la Roboto ya no carga, con lo cual nuestra página ya es un poquito más ligera.

Paso 3: optimizar las variaciones de la fuente

A parte de deshacernos de fuentes innecesarias lo que podemos y lo que debemos hacer es optimizar las variaciones de una misma fuente. Las variaciones seguro que os las conocéis, son los diferentes grosores que tiene una misma fuente o diferentes tipos por ejemplo, aquí vemos que hay un grosor de 300 que es más finita pero este por ejemplo, es la misma fuente pero es otra variación, y en este caso es una bold, o sea una 700. Y en este texto de aquí cargamos una 400 que es una regular, o sea es un grosor normal. Y para tener una fuente optimizada lo que debemos hacer es cargar sólo las variaciones que utilizamos y las que no utilizamos no cargarlas. Por ejemplo como véis aquí después de Montserrat pone diferentes numeritos y donde pone “i” es la itálica, es decir la inclinada, entonces está cargando diferentes versiones y algunas de ellas no las utilizamos así que vamos a ver cómo lo corregimos.

Para ello nos vamos a Google Fonts y buscamos la fuente que utilizamos que es la Montserrat. La añadimos y aquí podemos personalizar las variaciones que cargamos en Customize. Entramos aquí y como véis si sólo cargamos la 400 pues ya nos dice que nuestra página va a cargar rápido y hemos visto que utilizamos también la 300 y la 700 y véis que ya cambia el tiempo de carga si utilizamos sólo 3 variaciones. Y si ponemos más ya véis que afecta muchísimo la velocidad de carga así que vamos a utilizar solo 2, voy a quitar la light y voy a dejar regular y bold. Y ahora si volvemos a Embed vemos que el enlace ya ha cambiado y lleva sólo la versión 400 y 700. Lo copiamos que aquí sin incluir lo de https que no hace falta, y lo pegamos aquí.

Yo como véis la itálica tampoco la utilizo así que tampoco la necesito cargar y una vez guardado el archivo vamos a nuestra página, la recargamos y como veréis ahora como hemos quitado la 300, aquí arriba se cargaba la 300 y se carga la 400 porque como la 300 ya no la tenemos, se carga la más cercana y se ve igual de bien. De esta manera sólo cargamos dos versiones de la fuente con lo cual nuestra página es mucho más ligera que antes.

Y ya hemos terminado. Ya lo sabéis: para cualquier duda, pregunta, sugerencia o soborno me podéis encontrar en los siguientes lugares. Hasta la próxima 😀

🌐Web:
👱LinkedIn:
🌈Instagram:


Fuente – Source

Cómo optimizar las Google Fonts en WordPress

Necesitas ayuda con wp? Entonces WPVideo es tu sitio.
Encuentra lo que buscas entre cientos de miles de videos y experiencias personales de otros usuarios. Todos los que empezamos con wp deberíamos tener acceso a esta web, ojalá yo hubiera tenido algo así cuando empecé mi camino como webmaster 🙂
Pero ahora quiero y puedo poner esta web a vuestra disposición.
Disfrutadla 😉

Need help with wp? Then WPVideo is your site.
Find what you are looking for among hundreds of thousands of videos and personal experiences of other users. All of us who started with wp should have access to this website, I wish I had something like that when I started my journey as webmaster 🙂
But now I want and I can put this website at your disposal.
Enjoy it 😉

https://www.wpvideo.eu

Publicado en Temas (Themes), Tutoriales (Tutorials), Wordpress y etiquetado .

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *