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.
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 ;)
Hola Noelia, he intentado seguir todos los pasos que has puesto y todo bien pero a la hora de buscar en mi plantilla HTML el código h1, h2...lo que sea, no me sale, no lo encuentro. Cómo puedo solucionar esto? Mi tipo de plantilla es la sencilla.
ResponderEliminar¡Hola!¡ Me lo miro y te digo algo! Besos
EliminarGracias :)
Eliminar¡Hola Srta Pomelo! Perdona por el retraso. Te explico:
EliminarPara buscar h1 dentro de PLANTILLA - EDITAR HTML, pulsa CTRL+F y busca .Header h1.
Para h2 deberás hacer lo mismo pulsando CTRL+F y buscar el h2 que está justo debajo de /* Headings, ve haciendo intro en el buscador hasta encontrarlo. Y para h3 y h4 deberás buscar h3.post-title, .comments h4.
Espero solucionarte el problema, si no es así envíame un mail a hola@smukthings.com y lo arreglamos seguro! Muak!!!!
Hola! Esto funciona también para wordpress? Porque yo también me he perdido en el último paso!
ResponderEliminarGracias!!
Vanessa
¡Hola Vanessa! Este tutorial en concreto es para Blogger, en Wordpress no tengo ni idea de como funciona. Siento no poder ayudarte. Si consigo enterarme por ahí te digo algo!
EliminarOk! Muchas gracias!!
EliminarVanessa
Buenas, solo comentar que yo si lo uso para wordpress y me funciona perfectamente. Muchas gracias por este artículo y muchos otros!!
ResponderEliminarGracias. Ha sido el tutorial más claro que he encontrado. Un saludo.
ResponderEliminar