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).
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.
Conviene señalar dos cuestiones, una más de base y otra coyuntural:
Pero, ¿será posible aprovechar la disponibilidad de cargar esa sexta fuente, y destinarla a un selector distinto de los previstos por el sistema?
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.
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:
- 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).
- 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).
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.
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:
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