Añadir tipografías es de mucha ayuda sobre todo cuando las de Blogger se quedan un poco cortas, no hay mucha variedad y es un gran fallo ya que parte de la estética de un blog es la tipografía. Con
Google Fonts se pueden añadir de una manera rápida y sencilla. ¡Vamos allá!
PASO 1 Entra en
Google Fonts y elige las tipografías que más te gusten pulsando en
ADD TO COLLECTION, cuando ya hayas escogido tus fuentes haz click en
USE (abajo a la derecha). Yo he elegido la tipografía Roboto Slab.
PASO 2 Verás una serie de puntos, en el PUNTO 1 elige los estilos de fuente que quieres: Normal, Bold, Italic,...(los estilos dependen del tipo de fuente, en algunos sólo tendrás la opción de Normal). El PUNTO 2 déjalo tal cual (La casilla Latin es la que incorpora las tildes).
PASO 3 Al elegir los estilos de fuente el PUNTO 3 te proporcionará un código como éste para que lo añadas en tu plantilla de Blogger en Diseño/Edición de HTML justo después de <head>.
| <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100' rel='stylesheet' type='text/css'> |
IMPORTANTE: una vez pegues el código ciérralo añadiendo el slash que aparece en rojo.
| <link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,300,100' rel='stylesheet' type='text/css'/> |
PASO 4 Es el momento de añadir las tipografías dónde te interese siguiendo el código que proporciona el PUNTO 4, incluyendo la opción de estilo de fuente que quieres (mira el ejemplo que hay más adelante). Haz siempre una copia de seguridad de tu plantilla antes.
Para añadirlas hay que buscar h1, h2, h3, h4 en la Edición de HTML y modificar las tipografías por las que queremos.
Si lo quieres para el texto de debajo de las entradas, (dónde están los comentarios, publicado por, etiquetas, etc.) deberás buscar .post-footer y añadir el código.
EJEMPLO La fuente que yo he seleccionado, Roboto Slab, me permite los estilos de fuente Ultra-Light 100, Book 300, Normal 400 y Bold 700. Si elijo el estilo Book 300 y la quiero utilizar en el texto de las entradas, entonces buscaré .post-body y modificaré el código de font-family para la fuente y el código de font-weight para el estilo:
.post-body {
font-family: 'Roboto Slab', sans-serif;
font-weight: 300;
line-height: 2;
position: relative;
} |
¡De esta manera puedes cambiar las tipografías de tu blog que tú quieras!
¡Que tengáis un buen Jueves!
P.D. Espero haberme explicado bien ;)
Si no encontráis la herramienta CAPA, id a Ventana en la barra de herramientas para abrirla.
