Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress

Share to social media
Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

En este post de El Taller de Blogpocket se explica en detalle la manera de desactivar la familia (o familias) de fuentes tipográficas Google Fonts, que tengas activada en tu theme de WordPress. Así, podrás activar otra familia (o familias) diferentes. A continuación, se expone cómo averiguar la URL de Google Fonts (fonts.googleapis.com), correspondiente a la familia tipográfica que quieres añadir. También aprenderás los pasos a seguir para que todo funcione sin necesidad de ningún plugin. Es un método que te servirá para cualquier theme de WordPress que tengas activo. ¡Cambia de tipo de letra de Google Fonts en tu theme en un abrir y cerrar de ojos! Pim, pam, pum…
Y si quieres resolver el error Leverage Browser Caching Warning in WordPress en GTMetrix para Google Analytics también tenemos el plugin adecuado.

Primero, ¿qué es Google Fonts?

Google Fonts (anteriormente llamado Google Web Fonts) es un directorio interactivo de uso libre que fue lanzado en 2010, y renovado en 2011. Las Fuentes de Google están diseñadas para proporcionar una plataforma gratuita para usuarios con el fin de descubrir nuevas fuentes y se está utilizado extensamente. Por ejemplo, en el theme actual de Blogpocket usamos Lato.

Habitualmente, y en la práctica, para usar un tipo de letra concreta de Google Fonts, hay que hacer disponibles para su uso en el CSS, las definiciones (instrucciones CSS) y los archivos (de diferentes extensiones: ttf, woff, woff2, svg, etc.) Esto se puede hacer de tres maneras:

  • Cargándolo dinámicamente desde una URL externa al principio del HTML.
  • Escribiendo tú mismo las definiciones en el CSS y almacenando los archivos en algún sitio de tu hosting. Naturalmente, esto lo puedes hacer siempre y cuando sepas dichas definiciones y tengas los archivos. Aprenderemos en este artículo como tener ambas cosas.
  • Con un plugin. Por supuesto, existen plugins de WordPress para todo y esta cuestión no iba a ser menos. Con Google Fonts Typography puedes cambiar fácilmente los tipos de letra, sin problema. Sin embargo, lo que pretendemos en este artículo es que entiendas el funcionamiento de las Google Fonts, así que dejaremos por esta vez los plugins 😉

Método de carga externa

Como se explica en RGPD y Google Fonts: cómo proteger la privacidad de tus visitas si usas las fuentes de Google, este método no es aconsejable.

Pero es el que se usa en la inmensa mayoría de los themes.

Por lo tanto, veamos primero un ejemplo de carga externa mediante una URL de Google Fonts. Te recuerdo que esa carga externa sirve para que el HTML tenga las definiciones del CSS y los archivos de manera dinámica.

 
Encuentra la URL

Para averiguar cuál es el tipo de fuente que se usa en tu web, siempre y cuando se utilicen las librerías de Google Fonts y se carguen de forma externa, accede a la página home y acude, en Chrome, a la opción Ver > Opciones para desarrolladores > Ver código fuente. Si tu página no está comprimida, busca al principio del HTML lo siguiente.

Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

En la URL señalada con 1, encontrarás las familias de fuentes que se usan y los estilos (veremos más en concretamente qué es eso de los estilos en un apartado posterior de este artículo)

En el parámetro señalado con 2, aparece un nombre interno que te hará falta conocer si quieres desactivar esta librería mediante un hook de WordPress, el denominado handle que es lo que va antes de «-css». En el ejemplo, el handle es «blogpocket-fonts».

A este método de carga de las Google Fonts lo denominaremos de «URL externa»

Cómo ver las definiciones CSS

Haz clic en dicha URL, cuando estés viendo el código fuente en la opción para desarrolladores de Google Chrome. Lo que se mostrará es las definiciones CSS externas para que se puedan usar las fuentes correspondientes dentro del CSS de tu theme.

En un posterior apartado de este artículo desenredaremos la madeja de este CSS de definiciones de fuentes. Necesitarás conocer un poquito el entramado del código si quieres cargar las fuentes de Google de manera manual, sin hacer uso de la carga externa (tal y como se recomienda para cumplir con la privacidad de datos)

Ejemplo de referencia en el CSS
Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

La imagen anterior, corresponde a una hoja de estilo de un theme en el que se está estableciendo el tipo de letra que regirá en el cuerpo del HTML: «Source Sans Pro» y con el estilo sans-serif, además de otras características como colores y tamaños.

Pero aunque pongamos la instrucción font-family diciendo que el tipo de letra es Source Sans Pro, no veríamos ese tipo de letra en el theme si no se han «cargado» previamente las definiciones de fuentes y los archivos, bien con el método de carga externa o haciéndolo de manera manual.

¡Manos a la obra! ¡Eliminemos la carga externa de las Google Fonts!

Tu objetivo principal es aprender a modificar el tipo de letra de Google Fonts de cualquier theme de WordPress (sin plugin), aunque -de paso- aprendas también a cargar las Google Fonts de manera manual; es decir, sin que hagas uso de una URL externa.

Pero, en cualquier caos, el primer paso para cambiar el tipo de letra, en cualquier theme de WordPress, en el que se cargue la librería externa de Google Fonts, es desactivar el encolamiento correspondiente de código CSS.

Podría darse el caso de que no se haya utilizado la función wp_enqueue_style para encolar código CSS pero la mayoría de los themes actuales emplean este método.

Así pues, en primer lugar, ejecutaremos al final del archivo functions.php (este archivo está en la raíz de tu theme activo) la función wp_dequeue_style con el handle correspondiente. ¿Te acuerdas de cómo averiguar el handle? Revisa la opción «Encuentra la URL» del acordeón del apartado «Método de carga externa». Si el handle es «blogpocket-fonts», quedaría algo así como:

wp_dequeue_style( ‘blogpocket-fonts’ );

Con esta simple instrucción, al final de functions.php, lograrás desactivar el tipo de letra que se configuró en tu theme.

¿Y te quedas sin tipo de letra? No, ya que existirá definido un tipo de letra por defecto. Pero, siguiendo con el ejemplo, aunque no se haya modificado el CSS (¿recuerdas esa definición de font-family en archivo con la hoja de estilos?) será imposible ver la fuente Source Sans pro.

¿Qué tipo de letra de Google Fonts quieres añadir ahora? ¡Tienes que conocer su URL y cómo se referencia en el CSS!

Nos hemos quedado sin tipo de letra de Google Fonts, y vamos a cargar otra tipografía distinta siguiendo con el método de URL externa de Google Fonts.

En este punto, debemos saber tres cosas:

  • Cuál es la URL de Google Fonts correspondiente al nuevo tipo de letra.
  • Cómo se referencia la familia dentro del archivo con la hoja de estilos.
  • Cómo se encola el nuevo estilo CSS en el theme a través de functions.php (ya adelantamos antes que era con la función wp_enqueue_style pero no dimos detalles)
¿Cómo averiguo la nueva URL?

Muy sencillo, entra en https://fonts.google.com, busca el nombre de la nueva fuente y en la caja resultante, haz clic en el signo + (ángulo superior derecha).

En el pop-up que se muestra, hay dos pestañas: Embed y Customize.

Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

En Embed está la URL (1) y la sintaxis adecuada para referenciar a la familia en el CSS de tu theme.

Antes de continuar, dedica un momento a la personalización. Haz clic en Customize, para obtener lo siguiente.

Cómo modificar el tipo de letra de Google Fonts de cualquier theme de WordPress - Soy consciente de la importancia del atributo ALT y estamos trabajando para mejorar la accesibilidad de este sitio web.

Con estos checks vas a determinar los estilos. Esta parte está asociada al CSS que ves si haces clic en la URL dentro del HTML con la opción para desarrolladores (ver código fuente) ¿recuerdas? Por ello, lo dejamos de momento para un apartado posterior en el que se explica todo esto con claridad, despacio y en detalle.

Vuelve a Embed y anota tanto la URL como la forma de referenciar al tipo de fuente en el CSS.

¿Cómo referencio al tipo de letra dentro del archivo con la hoja de estilos del theme?

Si por ejemplo, en Google Fonts has obtenido en la pestaña Embed lo siguiente:

font-family: «Audiowide», cursive;

Esa sería la manera correcta de referenciar a este nuevo tipo de fuente dentro del archivo CSS del theme.

¿Cómo se encola el nuevo estilo CSS en el theme?

Bien, ya tenemos la URL y el handle; también hemos modificado el archivo CSS cambiando todas las referencias a font-family con el nuevo tipo de letra. Ahora solo queda decirle al theme que cargue la URL de las Google Fonts externamente. Te recuerdo que dicha URL hace una llamada al sitio externo en el que se encuentran las definiciones de los estilos y los archivos de las fuentes. De esa manera, no es necesario que almacenemos todo esto en nuestro servidor.

Para ello usaremos la función wp_enqueue_style, colocando como parámetros la nueva URL y el handle.

Al final del archivo functions.php escribiremos el siguiente código, sustituyendo HANDLE por blogpocket-fonts, por ejemplo; y URL google fonts por la URL de la carga externa de Google Fonts.

wp_dequeue_style( 'HANDLE' );

wp_enqueue_style('HANDLE',
        'URL google fonts',
        [],
        null
            );

¡Ahora viene lo bueno! Vamos a desentrañar el misterio de los estilos

Decíamos que al hacer clic en la URL de la carga externa de las fuentes de Google (obtienes el código fuente en Ver > Opciones para desarrolladores > Ver código fuente) se obtiene el código CSS correspondiente a las definiciones necesarias para que el tipo de letra se pueda usar en el theme.

Supongamos que haces clic en una de esas URLs. Verás un conjunto de definiciones; pero en realidad es un bloque que se repite unas cuantas veces. Tratemos de entender lo que significa cada bloque. Por ejemplo, el siguiente:

/* cyrillic-ext */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: local('Source Sans Pro Italic'), local('SourceSansPro-Italic'), url(https://fonts.gstatic.com/s/sourcesanspro/v13/6xK1dSBYKcSV-LCoeQqfX1RYOo3qPZ7qsDJB9cme_xc.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

Pero, en paralelo, volvamos a https://fonts.google.com, busquemos Source Sans Pro, abramos el pop-up con el signo + y fijémonos en lo que dice la pestaña Customize. En el apartado Languages vemos todos los lenguajes soportados por esta fuente.

Si solo vamos a emplear el conjunto de caracteres Latin, no tiene sentido incluir Cyrillic-Ext; así que el bloque que hemos mostrado anteriormente lo podríamos eliminar.

Después en el bloque que se muestra más arriba, hay dos parámetros importantes. Uno es el estilo de la fuente font-style (italic) y otro es el tamaño font-weight (400).

Si regresamos a https://fonts.google.com, en la pestaña Customize de Source Sans Pro vemos que todos los tamaños se dividen en dos estilos: normal e italic. Aunque ahí vemos distintos nombres para el tamaño (light, regular, bold, etc.), en el bloque de CSS solo se indica el número correspondiente: light es 300, regular es 400, bold es 700, etc.

Así que, a la vista del CSS de la URL de carga externa de las fuentes de Google, sabremos que lenguajes están soportados y, dentro de cada uno, qué estilos (italic o normal) y qué tamaños. ¿Fácil, a que sí?

Eso es maraviloso, porque además de saber que estilo están soportados, nos serviría para cargar las fuentes de Google manualmente. En contraposición a la carga de una URL externa está el método manual. Si optas por dicho método manual (ver apartado siguiente) recuerda que debes eliminar el encolamiento de las fuentes de Google mediante la URL externa.

En resumen, si vamos a usar la carga externa de las Google Fonts, marquemos en la pestaña Customize, las casillas de acuerdo a lenguajes y estilos que queremos soportar; y vayamos después a la pestaña Embed para obtener URL y código de font-family para incluir en el CSS del theme.

Luego, según hemos explicado antes, desencola y encola mediante las funciones wp_dequeue_style y wp_enqueue_style. Esta última llevará la URL y el handle apropiados y que ya sabemos obtener perfectamente.

Finalmente, modifica el CSS del theme para que se haga referencia a la nueva font-family.

Carga manual de las Google Fonts

A partir del CSS que vemos si hacemos clic en la URL de Google Fonts, dentro del HTML con la opción de ver código fuente, averiguamos -como ya se ha visto-:

  • Lenguajes (latin, greek, etc.)
  • Estilos (normal, italic, etc.) y tamaños (200, 300, 400, etc.)

Con esa información se puede ir a la herramienta https://google-webfonts-helper.herokuapp.com/fonts; y conseguir las definiciones CSS (que añadiríamos al final del archivo con la hoja de estilos del theme, situada en la raíz) además de los archivos con las fuentes.

En dicha herramienta Google Webfonts Helper, haríamos lo siguiente:

  • Elegir el charset. Es decir el lenguaje (cyrillic, latin, etc.)
  • Seleccionar los estilos y tamaños.
  • Copiar el código CSS resultante. Aquí se puede personalizar el path que por defecto es «../fonts/» *
  • Descargar los archivos.

Finalmente, acude a la hoja estilos de tu theme activo y modifica la instrucción (o instrucciones) correspondientes a cada definición de familia de fuente (font-family), de acuerdo a la tipografía que has cargado manualmente.

(*) El significado de los dos puntos antes de la primera barra en «../fonts» es situar el directorio «fonts» con los archivos de las fuentes al mismo nivel que el directorio del theme; es decir, colgando de wp-content/themes/

Cómo resolver el error «Specify a character set early»

Es probable que con la carga manual de las Google Fonts aparezca en GTMetrix el error «Specify a character set early».

La manera de resolverlo es añadiendo las siguientes instrucciones al archivo .htaccess.

AddType font/ttf .ttf
AddType font/eot .eot
AddType font/otf .otf
AddType font/woff .woff
AddType font/woff2 .woff2  

Cómo resolver el error «Leverage Browser Caching Warning in WordPress»

Este error en GTMetrix se resuelve por el hecho de cargar las Google Fonts manualmente, como ya se ha visto.

Aunque la carga manual es perfectamente válida, y no tardarás más de cinco minutos en implementarla, para llevarla a cabo nos podemos ayudar de un plugin de WordPress que realiza todo la carpintería por nosotros.

El plugin es OMGF (Optimize My Google Fonts) y es tan fácil de configurar como activar la opción «Remove version parameter?» y aplicar los cambios primero.

Después, busca la fuente que quieres cargar y selecciona subconjuntos (latin, etc.) y estilos que deseas conservar.

Haz clic en «Download Fonts», para descargar los archivos (en el directorio que hayas puesto en «Save webfonts to… «; y luego en «Generate Stylesheet» con el fin de añadir dinámicamente el código CSS en la cabecera de las páginas del theme. No tienes que añadir tú el código ni nada de eso. Finalmente, elimina la carga de las Google Fonts antiguas; bien con el método de desencolar visto en este artículo o, simplemente, empleando la opción correspondiente del plugin Autoptimize (pestaña «Extra» de su configuración».

Relacionado

Self-hosting Google Fonts for WordPress

Conclusiones

Con todo lo anterior sabemos:

  • Desactivar cualquier tipografía con la función wp_dequeue_style
  • Activar un nuevo tipo de letra con la función wp_enqueue_style. Para ello necesito la URL de Google Fonts correspondiente y el nombre del handle.
  • Averiguar la URL de Google Fonts de la nueva tipografía con https://fonts.google.com
  • Averiguar el nombre del handle consultando el código fuente de la página (también podemos averiguar así la URL de Google Fonts de la tipografía actual que usa nuestro theme.
  • Generar el CSS y descargar los archivos de las fuentes con https://google-webfonts-helper.herokuapp.com/fonts (métoto manual) para evitar la carga externa de Google Fonts mediante una URL
  • Modificar dentro del archivo con la hoja de estilos la instrucción de font-family (esto hay que hacerlo siempre y cuando se cambie a una nueva familia de fuentes).

Responder en Mastodon (requiere usuario en esa plataforma)

Puedes usar tu cuenta de Mastodon para responder a este post de

Copia y pega esta URL (https://www.blogpocket.com/2019/11/02/todo-sobre-google-fonts/) en el campo de búsqueda de la interfaz web de tu servidor Mastodon.

Icono de Mastodon

Deja una respuesta

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

Información básica sobre protección de datos Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento: No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a GreenGeeks que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido