Ir al contenido principal

Tipografías en Blogger: un truco para tener en cuenta

El uso de fuentes tipográficas cargadas de modo online permite no sólo el enriquecimiento visual de un sitio web: también facilita la experiencia del visitante al aportar un rápido sentido de ubicación ante la lectura de cada página.
Vamos a analizar en este post una manera rápida y relativamente sencilla de dar riqueza tipográfica a nuestros blogs, usando un truco que puede implementarse directamente desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger (es decir, sin editar directamente la plantilla XML de nuestro blog).

Los orígenes de la idea

Para llevar a cabo la escritura del post previo (que versaba también sobre las posibilidades de cambios tipográficos en Blogger) tuve que investigar en qué sección de la plantilla se reflejan los cambios hechos desde la ventana del Diseñador, específicamente aquellos relacionados a la configuración de las fuentes a ser empleadas en mi blog.
Vuelvo a mostrar ahora la tabla que condensa la información relevada en ese momento, donde incluyo las 6 fuentes que elegí para ser usadas en el blog (en junio de 2016), —una plantilla del grupo Watermark—, y los selectores a los que estaban destinadas… todas las fuentes seleccionadas pertenecen al servicio de Google Fonts.

Variable name elementos afectados familia de fuente elegida
body.font selector="body" Roboto
header.font selector=".header h1" Luckiest Guy
tabs.font selector=".tabs-inner .widget li a" Oswald
date.font selector="h2.date-header" Cuprum
post.title.font selector="h3.post-title, .comments h4" Paytone One
widget.title.font selector="h2" Paytone One

Conviene señalar dos cuestiones, una más de base y otra coyuntural:
  1. El sistema de configuración de Blogger permite la selección de 6 fuentes diferentes —para plantillas pre-2017—, pero no permite elegir a qué selectores serán destinadas: de la tabla se infiere que 4 de las mismas están destinadas a títulos, una a los links del menú principal (sólo visible si es agregada a través de un gadget), y una sola fuente al texto de base del blog (en mi caso, Roboto).
  2. En mi configuración de fuentes, hay dos que se repiten, por lo que el sistema cargará la fuente Paytone One una sola vez (dicho de otra forma, sólo cargará 5 fuentes desde Google Fonts, y no 6).
Del post previo nos llegaba la conclusión que añadir una fuente online para ser destinada, por ejemplo, a los textos del footer de nuestro blog, no era una tarea tan sencilla (al menos, sin meternos con el código de la template XML del blog).
Pero, ¿será posible aprovechar la disponibilidad de cargar esa sexta fuente, y destinarla a un selector distinto de los previstos por el sistema?

La idea en acción

Veamos cómo funciona la idea con un ejemplo concreto.
Paso 1
Voy a reemplazar temporariamente la fuente que configuré para los títulos de los posts (concretamente, los selectores h3.post-title y .comments h4 ) por la fuente que quiero que el sistema cargue para un posterior uso (la fuente Puritan)… con esto consigo desentenderme del problema de editar directamente la plantilla.
  • Abro la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger, selecciono la categoría Entrada, y cambio la fuente previa (Paytone One de 30 px) a Puritan de 24px.
El selector  h3.post-title deberá ser reconfigurado desde ya a su valor previo (en un momento veremos cómo), pero el selector .comments h4 quedará ya con su valor definitivo  —es el que elegimos para los títulos del área de comentarios en el post anterior—.
Paso 2
Asigno la nueva fuente Puritan a los textos mostrados en el footer, y también devuelvo el estilo que tenían los títulos principales de los posts antes de ejecutar el paso 1.
  • Busco en la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger la opción Agregar CSS, y escribo lo que ves a continuación:
¿Algo más..? Nada más. Sólo 2 pasos.

Conclusiones

Como se vé, el truco propuesto es de muy rápida aplicación, y especialmente recomendable para todos aquellos que tengan algunos conocimientos básicos de HTML y CSS, pero no conozcan tanto sobre los manejos de la template XML de Blogger.
Está probado en una de las plantillas “oficiales” de Blogger (del grupo Watermark)… supongo que debe funcionar en el resto de las plantillas suministradas por Blogger, aunque en otras plantillas personalizadas no lo puedo asegurar.
Requiere sí el tener disponible alguna fuente del grupo de 6 que nos deja configurar fácilmente Blogger (debe haber alguna repetición de fuentes en nuestra configuración previa).


Desconozco si este método o truco ya ha sido presentado por alguien en la blogosfera, así como si existe algún inconveniente o contraindicación en su aplicación… desde ya cualquier comentario está más que bienvenido. Chau.

Comentarios

Entradas más populares de este blog

Notable Ep. One > Epilogue

La utilización de una plantilla oficial para el diseño de un blog en la plataforma Blogger siempre presentó una ventaja para quienes quieran personalizarlas sin tener grandes conocimientos de diseño web: esto se sigue manteniendo para los cuatro nuevos themes responsives presentados en 2017, incluyendo al theme Notable que estamos analizando. En la presente entrada vamos a hablar de cómo personalizar el tamaño de la tipografía en dicho theme para un rango de visualización intermedio (680 a 968px). NOTA: en este blog han sido tratados, en post escritos en junio de 2016   , cuestiones vinculadas a ajustes de las plantillas oficiales en uso en ese momento, plantillas que no generaban layouts de tipo responsive como las nuevas. En lo que sigue nos concentraremos en los procedimientos a aplicar en un theme del 2017 específico, el theme Notable. Una breve recapitulación Estuvimos tratando en el post anterior cuestiones que tienen que ver con el tamaño con que se muestra el texto pr

Ajustes finos en la plantilla Blogger (III)

Hacer ajustes de diseño en la plantilla Blogger es un proceso que implica una serie de pasos, de los cuales vimos los vinculados a la identificación de las etiquetas HTML a las que se les aplicarán los cambios de estilo CSS. Efectuar esos cambios desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger es relativamente sencillo (para quien cuenta con conocimientos en CSS), quizás con una única excepción: cuando queremos emplear una tipografía desde servicios de fuentes online…

Configuración del Blog: ¿público o privado? (II)

En la entrada anterior hablamos rápidamente sobre la clasificación de los usuarios de un blog en Blogger según su rol (administrador, autor y visitante/lector). También (y como el título de estas entradas lo sugiere) hay otra clasificación —esta vez de los blogs— según un aspecto funcional básico: públicos o privados. Nos centraremos a continuación en hablar sobre los blogs privados y, especialmente, en su utilidad dentro del ámbito educacional.