instalar google fonts en blogger

, , , ,

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.

Tipografía para blogs
La importancia de la elección de 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…

google fonts para blogger

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.

letras de google fonts

Una vez que ves que la fuente te convence vamos a elegirla:

poner google fonts en blogger

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.

 

 

cambiar la letra en blogger

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

cambiando el tipo de letra en blogger

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:

poner otra letra en blogger

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:

Cambio de letra en blogger

<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.

blogger y google fonts

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?

What do you think?

27 puntos
Upvote Downvote

Total votes: 0

Upvotes: 0

Upvotes percentage: 0.000000%

Downvotes: 0

Downvotes percentage: 0.000000%

comentarios

Leave a Reply
  1. ¡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

    • 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

  2. ¡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

    • 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

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

dominio-gratis-blog

Como conseguir el dominio gratis para un blog

formato de imagen

Formatos de imagen para blogs