martes, 28 de junio de 2016

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…

Antes de seguir con los pasos prácticos necesarios para cambiar nuestro blog, convendrá discurrir sobre esta cuestión.

Cambios de tipografía en Blogger: casos posibles

I – Usar fuentes del grupo web safe fonts (fuentes seguras)

Parece un eco que nos llega del pasado, pero tener en cuenta a los grupos de fuentes que ya están instaladas mayormente en los distintos sistemas operativos sigue siendo una opción a no dejar de lado, dado que posibilitan acelerar la carga y visualización de las páginas web.

Aplicar esto a nuestro trabajo sería tan simple como añadir un estilo como el que sigue:

footer {font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; }
Links de interés:

II – Usar fuentes online ya cargadas en la configuración básica de nuestra plantilla Blogger

Por si no reparaste en el detalle, durante el proceso de configuración de nuestra plantilla “oficial” vas a poder elegir 6 familias de fuentes distintas, ya sea desde el grupo web safe instaladas en casi todas las computadoras, ya sea desde Google Fonts.

Me tomé el trabajo de explorar en mi plantilla (del grupo Watermark, como ya comenté en un post previo), y encontré las seis variables asociadas a la configuración. En las plantillas XML se usan esas variables para construir algunos de los estilos CSS asociados a determinados selectores.

Aquí te muestro una tabla con algunos datos relevantes de mi análisis:

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

NOTA: recuerdo una vez más que los datos pertenecen a la plantilla que estoy usando en junio de 2016.

Ya que estas fuentes online ya han sido cargadas, una pregunta interesante surge casi naturalmente: ¿no sería posible usar alguna de esas fuentes para dar formato a otras secciones de nuestro documento?

La respuesta es SI. De hecho, ya empecé a enriquecer visualmente el área de contenidos de este blog asignando la fuente Cuprum a los selectores h3, h4 y h5 incluidos en los posts; queda algo así:

div.post-body h3 {font: bold normal 1.67em Cuprum; margin:.5em 0}
div.post-body h4 {font: bold normal 1.3em Cuprum; margin:.67em 0}
div.post-body h5 {font: bold normal 1.1em Cuprum; letter-spacing:1px; margin:1em 0}
De la tabla anterior también surge una idea interesante, que voy a dejar tanto en su enunciación como en su aplicación para una próxima entrada (…cuanto misterio!).

III – Usar fuentes online no cargadas previamente por la plantilla Blogger

Al fin llegamos al caso que planteamos en su momento: queríamos usar la fuente Puritan para los textos del contenido del área de footer, y para los títulos del área de comentarios. Recordemos además que dicho planteo incluía una condición: estudiar si esto puede realizarse SIN entrar a editar directamente la template XML de nuestro blog (así, cualquiera…).

El primer acercamiento que intenté para resolver esto fue apelar a la regla @import, que permite —entre otras cosas—  importar hojas de estilo específicas para el agregado de fuentes, como el servicio que ofrece Google Fonts. Probé con algo como esto:

@import 'https://fonts.googleapis.com/css?family=Puritan';
footer {font-family: Puritan', sans-serif; }

¡Y no me funcionó!. . Investigando, me enteré de la regla @import debe añadirse sí o sí en la parte superior de las definiciones CSS, y eso es algo que no se puede conseguir desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger.

Pero no todo está perdido. Otras de las reglas que se incorporaron con la aparición de las especificaciones CSS3 fue @font-face, que permite cargar fuentes desde archivos de variados formatos (.ttf, .otf, .woff, etc.), archivos que, en principio, deben estar disponibles públicamente en la web.

La manera más común de resolver esto es cargar los archivos en alguna carpeta compartida que habilitemos en la nube (en Dropbox, o Google Drive, etc), y crear los enlaces a las mismas usando @font-face —dejaré algún link de alguna página donde se describa este método—.

En mi caso voy a optar por emplear un servicio de fuentes llamado oNline Web Fonts , desde donde es posible acceder a infinidad de fuentes que incluyen a la mentada Puritan (aunque en su versión 1.0). Desde el sitio nos ofrecen  el código listo para ser utilizado, y además la posibilidad de descargar la fuente a nuestro ordenador, para facilitar pruebas locales.

En fin, el código a agregar en la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger será el siguiente:

/***CODIGO PARA AJUSTES TIPOGRÁFICOS - FUENTE PURITAN***/
@font-face {
font-family: "Puritan";
src: url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.eot");
src: url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.eot?#iefix") format("embedded-opentype"), url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.woff2") format("woff2"), url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.woff") format("woff"), url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.ttf") format("truetype"), url("http://db.onlinewebfonts.com/t/ac1d0fafe4a205a15d95c8265d31557b.svg#Puritan") format("svg");
}
footer{
font-family:"Puritan" !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;
}
div#comments h4 {font-family: 'Puritan', sans-serif; font-size:24px;}
Links de interés

Conclusiones finales

Para quien tenga conocimientos básicos de HTML y CSS le resultará sencillo realizar ajustes en la plantilla Blogger, sin necesidad de editar directamente la template XML (ni de conocer demasiado de su estructura, etc.). Puede realizar esto desde la ventana de Opciones Avanzadas del Diseñador de plantillas de Blogger.

Para el caso particular de cambios donde se pretenda incorporar nuevas tipografías online, vimos que el tema  puede ser complicado de resolver desde la ventana anterior… en realidad en esos casos conviene editar la template XML, agregando una línea HTML como la siguiente:

<link href="https://fonts.googleapis.com/css?family=Puritan" rel="stylesheet">

Existen numerosos tutoriales para realizar esto, así que no voy a abundar en detalles al respecto.


Para un próximo post les mostraré un truco que funcionará bajo ciertas condiciones, que hará simple la utilización de fuentes online desde Google fonts sin tener que acceder a la template.XML, ni usar @font-face. Chau.

No hay comentarios. :

Publicar un comentario

Related Posts Plugin for WordPress, Blogger...