Instalación de fuentes en Blogger

Como prosumidores, leer o escribir es sumamente agradable. Que una tipografía nos guste y permita una lectura fluida, también.

Y hete aquí que muchas veces la versión de escritorio y la móvil difieren en tipografía. Es más: quizás ni siquiera lo hemos notado; o, habiéndolo notado, pensamos que es algo "normal"; que no puede subsanarse.

Con sinceridad: ¿solemos comparar si la nota que hemos escrito o estamos leyendo se ve igual, en cuanto a tipografía, en ambas versiones? Habitualmente, no. Esos detalles casi siempre son ignorados.

Detalles que se solucionan, en este caso [spoiler a la vista], recurriendo a Google Fonts y editando la plantilla.

Aclaraciones antes de proseguir

El tema a desarrollar está explicado a través de texto e imágenes que responden a las versiones anteriores de Blogger y de Google Fonts; no obstante, se ha agregado un vídeo que contempla las versiones actualizadas. 

¿Con qué fuentes hemos diseñado nuestro blog?

Ante la duda, nada mejor que consultar la interfaz de Blogger. (Ha de notarse que en la interfaz "vieja" las vistas previas de las versiones de escritorio y móvil no evidenciaban diferencias tipográficas; quizás por ello es que uno presuponía que el error era del móvil).

Para ver o corroborar cuál es la fuente que hemos puesto (en este caso en la marquesina que encabeza el blog y en el título de las entradas: con que verifiquemos una nos basta), nos vamos a Tema > Personalizar. 

Ya en el Diseñador de temas, lo que hacemos es ir a Avanzado > Título de la entrada (que es una de las que tenía problemas: no se cargaba la fuente en la versión móvil). Dentro del apartado Fuente, vemos que, en este caso, la misma es Lobster.

Objetivo cumplido. Nos vamos a Google Fonts. 

Google Fonts: un mundo mágico al alcance de todos

Este repositorio de más de 800 fuentes gratuitas está en línea desde el 2010. (Confieso que recién me entero).

Se pueden seleccionar las fuentes por categorías, lenguaje o propiedades o buscarlas por el nombre. (La Lobster, por ejemplo, pertenece a la categoría Display, fuentes ideales para titulares por su alto impacto visual). 

Para este caso, colocamos el nombre de la fuente en el recuadro de búsqueda (1) y luego en el de la fuente que queremos (2).

Aquí podemos realizar principalmente dos acciones para utilizarla.

La primera: hacer clic en Download family (1), tras lo cual se nos abre una ventana de descarga que nos permite bajar la fuente en formato zip para instalarla en nuestro ordenador y usarla en forma local.

La segunda: hacer clic en Select this style (2), lo cual nos facilita la obtención del código para cargarla en nuestro blog. Hacemos clic allí, pues. 

Hacemos clic en la pestaña Embed (1) y luego copiamos el código que aparece en <link> (2).

Objetivo cumplido. Volvemos a Blogger.

¡Manos a la obra (plantilla)!

Ahora nos resta cargar el código en la plantilla.

Nos vamos a Tema > Editar HTML.

Hacemos clic en cualquier parte de la plantilla y habilitamos el buscador con Control + F. Colocamos </head> en el cuadro de búsqueda (1). Damos intro y aparece resaltado el final de la cabecera (2).

Insertamos el código antes de </head> (1), guardamos el tema (2) y nos aparece un cartelito avisándonos que falta un punto y coma antes de display (3): en realidad, el ampersand que lo antecede debe ser referido como &amp; y no sólo &. Es decir, falta escribirlo en html (la "conversión" no es automática en la plantilla).

Pasamos el ampersand a html (1), guardamos el tema (2) y nos aparece otro cartelito avisándonos que falta cerrar la etiqueta <link> (3).

Esto se puede realizar de dos maneras. La primera consiste en colocar íntegra la etiqueta de cierre: </link>; la segunda, en colocar una barra en la etiqueta de apertura antes del ángulo de cierre: <link … /> (1).

Guardamos (2) y ¡hemos terminado!

Resultado final

Aquí se ve el antes y el después de la versión móvil. Sencilla muestra de lo maravilloso que es meter mano en el código para conseguir lo que queramos.

Vídeo con la interfaz nueva de Blogger

Y conforme lo anunciado al inicio de nota, aquí está el vídeo que acompaña la explicación anterior. Grabado en el Día de Brujas de 2020, parece haber sido alcanzado por algún conjuro, ya que ha demorado casi tres meses la publicación de esta nota. Pido disculpas por ello. 

YouTube, Moni Alus, «Instalación de fuentes en Blogger», 6 min 01 s, 31 de octubre de 2020

Información complementaria

• Maestros del web, ¿Cómo se diferencia el XML del HTML?, 11/11/2003.
• Clasificación tipográfica, Fuentes y familias tipográficas, ?/1/2009.
• Canva, Tipografías y fuentes no son lo mismo - conoce las diferencias, sin fecha.
• Mibestseller, Diferencia entre fuente, tipografía y familia tipográfica, 22/1/2019.
• Stackoverflow, While adding google font to my blog in blogger I got error in Header Section, 17/12/2019.

Fe de erratas

Vale aclarar que, si bien la URL de esta entrada remite a agosto del 2020, su fecha de publicación es el 30 de enero de 2021; tal cual consta al inicio.

(El cambio de interfaz de Blogger ha acusado recibo. Pido disculpas por ello).