Como añadir una fuente de google fonts a mi blog de blogger
Como añadir una fuente de google fonts a mi blog de blogger.
El tipo de letra es muy importante en diseño web y en los blogs mucho mas todavía, las combinación de tipografías hace mas interesante el texto y lo convierte en mas fácil de leer cuando son acertadas, en cambio si no elegimos bien la letra podemos deslucir nuestro trabajo bloguero.
Por pereza solemos dejar la fuente que suele venir por defecto en la plantilla, eso le resta personalidad al diseño del blog, si es una plantilla gratuita de blogger verás fuentes bastante feas.. google fonts es de Google como blogger pero sigue haciendo esos churros.
Una letra bonita y agradable hace que el lector permanezca mas tiempo en tu blog, debes tener en cuenta muchos aspectos antes de elegir una fuente porque de ello depende no solo la apariencia, y le he dedicado este post sobre la tipografía en los blogs.
Google fonts es una librería gratuita de fuentes muy completa, la mas usada del mundo y tiene muchas opciones de personalización.
Buscar fuentes en Google fonts puede llevarte mucho tiempo, pero merece la pena emplear unas horas a elegir una buena tipografía para tu blog.
Este es el panel de Google fonts en el cuál puedes buscar las fuentes por popularidad, moda, ancho, tipo…
Si pinchas en el cuadrado pequeño debajo de las fuentes junto al botón azul, sale una ventana en la que te muestra todos los caracteres de la fuente que has elegido, esto es muy útil para ver si tenemos disponibles acentos, diéresis, ñ… si los números son feos o hay letras que no nos gusten, toma el tiempo necesario para añadir la fuente de google fonts que mejor se adapte a tu estilo.
Esta herramienta me encanta por que permite que estudies mejor la tipografía que vas a usar
estadísticas de uso de la fuente, fuentes de contraste y Typecast.
Una vez que ves que la fuente te convence vamos a elegirla:
Como puedes ver hay a la derecha un reloj que te indica si esa letra de Google fonts es muy pesada a la hora de subirla a internet, esto es muy importante, porque si tienes un servidor lento… lo vas a notar mucho.
Nos interesa esos códigos el primero es dónde está alojada la fuente o sea su librería y el segundo es el nombre de la fuente y su familia.
font-family: ‘Lora’, serif;
<link href=’https://fonts.googleapis.com/css?family=Lora’ rel=’stylesheet’ type=’text/css’>
Instalar una fuente de Google fonts en una plantilla de un blog de blogger
Vamos a blogger plantilla> editar HTML
Buscamos la etiqueta head (usa control+f) y sobre la etiqueta head pega la dirección de dónde está alojada la fuente en nuestro caso es este link:
<link href=’https://fonts.googleapis.com/css?family=Lora’ rel=’stylesheet’ type=’text/css’/>
También lo podemos incluir aquí que es dónde prefiero:
En blogger conviene cerrar antes de el signo > con una barra inclinada / para que quede cerrado el link. La primera vez que lo hice me volví loca porque no lo cerré y no funcionaba.
Ahora vamos a la segunda opción que es el nombre de la fuente que la debemos colocar en el CSS del blog, dependiendo de la plantilla es mas lioso o menos pero está encerrado en la etiqueta:
<b:skin>
Buscamos los bloques de estilos que queremos cambiar, yo en mi caso he elegido el cuerpo de letra o paragraph, según una plantilla u otra llamará de una forma u otra a los estilos.
colocamos entre medias el segundo código como en la foto.
font-family: ‘Lora’, serif;
Y ya está instalada la fuente Lora en esta plantilla de blogger.
Podemos instalar todas las fuentes de google fonts que necesitemos, pero la carga de la página se resentirá un poco,
Una curiosidad sobre google fonts
Que sentido tiene que se repita constantemente la frase:
«Grumpy wizards make toxic brew for the evil queen and Jack»
(Brujos gruñones preparan pócimas tóxicas para la malvada reina y Jack)
Por que es un pangrama inglés y sirve para emplear toda las letras de un alfabeto con la mínima repetición posible, es algo muy útil en tipografía.
Me venía a la cabeza cuando sólo se podían usar 18 tipos de letras en el diseño web, ¿os imagináis ahora?
11/09/2015 @ 7:37 pm
Que buenos tips !! No te conocía y me va a ir genial con algunas dudas
16/09/2015 @ 11:59 pm
Gracias Carol encantada de qye pases por aquí cuantas veces quieras, un abrazo.
16/09/2015 @ 8:37 pm
¡Hola! Genial entrada! yo porque ya me apaño con las que vienen en blogger.. pero la verdad es que este tipo de tutoriales son para tenerlos archivados en importantes.
Muchísimas gracias por la información
Besotes
16/09/2015 @ 11:58 pm
Gracias Carolina, si me intento poner las pilas a ver si hago mas post sobre blogger con mucha enjundia y tutoriales aplicables, lo que mas me preocupa es que los podáis seguir bien para que salgan a la primera.
Muchas gracias por tu apoyo y si se te ocurre algo o tienes dudas con toda confianza pregunta. Un abrazo
19/02/2017 @ 9:22 am
¡Hola! Espero no llegar tarde, necesitaria que me respondieras…
Cuando pongo el código como tu dices, justo debajo de , me dice:
«Error al analizar XML, línea 5, columna 14: Open quote is expected for attribute «href» associated with an element type «link».»
No sé lo que tengo que hacer, pues si intento arreglarlo por mi cuenta después no se mepone el tipo de letra… ¡Ayuda porfavor!
Besos, muy buen artículo.
Daniela
19/02/2017 @ 11:32 am
Necesitas el link de google fonts de la letra que has elegido tienes que colocar algo similar a esto según que letra elijas: asegurate de estar debajo de la etiqueta
Probablemente será que el enlace de la fuente que has elegido que le falta algo
Un saludo