Como agregar Google Fonts a tu blog (Blogger)

Este post tiene más de 2 años de antiguedad, esto significa que algunos enlaces pueden estar rotos o la información desactualizada.

Fuentes

Las fuentes de una página web, bien utilizadas, pueden contribuir a mejorar su aspecto y a una mejor comodidad al leer, como en fuentes como Trebruchet, Ubuntu y Arial, pero mal utilizadas pueden empeorar el aspecto de esta, como por ejemplo, utilizar en todo el texto Courier,otra mala utilización de fuentes sería el exceso de estas en una web, pues, además de que es probable que no se usen todas, contribuyen a una carga más lenta, algunas veces tardando más de un minuto en cargar.

 
Un buen lugar para encontrar fuentes gratuitas es Google Fonts, que cuenta, hasta el momento, con 629 familias de fuentes, todas de muy buena calidad y libres, optimizadas para la web.
Un exceso de fuentes terminara por ralentizar tu web de forma dramatica.
Esta guía esta hecha para aquellas personas que tienen poco o nulo conocimiento de HTML, por lo que esta llena de ejemplos para hacerla más fácil de entender.

Seleccionando en Google Fonts

Al navegar por Google fonts te encontraras con una lista de fuentes, cuando encuentres una que te guste, debes añadirla a tu colección haciendo click en “Add to my collection“, se añadirá a un listado y después aparecerán las tres opciones del menú:
 
Choose: Seguir navegando entre las fuentes y añadiéndolas a tu colección.
Review: Te mostrara la fuente siendo usada en textos y encabezados, permitiéndote cambiar su tamaño y elegir entre las distintas fuentes de la familia.
Use: Te llevara a una página con lo necesario para añadirla a tu web, además de especificaciones como tiempo que tardara en cargarse, idiomas, etc.
 
Cuando hayas elegido una o más fuentes, debes hacer click en Use, y después se abrirá una página en la que podrás seleccionar que fuentes de la familia deseas. Dependiendo de la cantidad, pueden ralentizar la carga de tu web, es recomendable no elegir muchas fuentes.
 
Después deberás dirigirte hacía abajo y copiar el código que se te proporciona.
descargar fuentes
Deberás copiar un código similar a este.

Añadiendo a Blogger

Para añadir esa fuente a tu blog de Blogger debes hacer lo siguiente:
– Abre el menú de Blogger y dirígete a “Plantilla”
Menú de blogger
– Haz click en “Editar HTML”
– Cuando cargue, busca la etiqueta <head> (o haz click dentro del recuadro, presiona Ctrl+F y escribe <head>) y pega el código debajo de ella, después guarda los cambios.
Como se muestra en la imagen. Si tienes un error, lee la información debajo de la imagen.


¡Importante!: Es posible que al pegar el código y guardar los cambios tengas el siguiente error:Error al analizar XML, línea 213, columna 5: The element type “link” must be terminated by the matching end-tag “</link>”.Esto es debido a un error en el código de Google, para solucionarlo debes añadir el carácter “/” (Sin las comillas) antes de “>” Ejemplo:

Código original:
<link href=‘http://fonts.googleapis.com/css?family=Gudea’ rel=‘stylesheet’ type=‘text/css’>

Código arreglado:<link href=‘http://fonts.googleapis.com/css?family=Gudea’ rel=‘stylesheet’ type=‘text/css’/>
Al hacer esto no deberías tener problemas al guardarlo.

 

Utilizar en las entradas

Entradas individuales:

Para utilizar la fuente de forma individual en cada entrada tienes que añadir el siguiente código a la redacción en HTML, haciendo click en el botón HTML.
<span style=”font-family:Gudea, serif;”>Texto</span>
Deberas modificar Gudea por el nombre de tu fuente (sin borrar la coma a la derecha) y Texto por el texto de tu entrada.

Convirtiendo la fuente en predeterminada para todas las entradas:

Si deseas utilizar esa fuente como predeterminada en todas las entradas de tu blog, entonces debes hacer lo siguiente:
1.- Ve a “Plantilla” “Editar HTML”.
2.- Sí aun no tienes añadida la fuente a tu blog, añádela siguiendo los pasos del apartado “Añadiendo a Blogger”.

Cambiando la fuente del título:

En Plantillas dinámicas:

             1.- Haz click en el recuadro HTML, presiona Ctrl+F y escribe
     <Group description=”Post Title”>
     
     2.- En las líneas de código que conforman esa etiqueta podrás ver una parte que dice:
            value=”‘Helvetica Neue Light’
               Modifica Helvetica Neue Light por el nombre de tu fuente, por ejemplo
               value=”‘Gudea’
     3.- Ahora guarda los cambios
El código completo debió haber cambiado de algo como esto:
<Group description=”Post Title”>
     <Variable name=”post.title.font” description=”Font”   type=”font”
default=”‘Helvetica Neue Light’, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif” value=”‘Helvetica Neue Light‘, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”/>
a algo así
<Group description=”Post Title”>
     <Variable name=”post.title.font” description=”Font” type=”font”
         default=”‘Helvetica Neue Light’, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif” value=”‘Gudea‘, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”/>
Cambiando Gudea por el nombre de tu fuente

En Plantillas normales:

            1.- Haz click en el recuadro de HTML y busca con Ctrl+F “Post Title”
            2.- En la etiqueta que aparecerá modifica el valor
            value=”normal normal 18px Georgia por el nombre de tu fuente, Ejemplo:
            value=”normal normal 18px Gudea
 
     3.- Guarda los cambios y listo.
 
El código debió haber cambiado de esto:
<Group description=”Post Title” selector=”h3.post-title, .comments h4″>
     <Variable name=”post.title.font” description=”Title Font” type=”font”
         default=”normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif” value=”normal normal 18px Georgia, Utopia, ‘Palatino Linotype’, Palatino, serif”/>
   </Group>
a algo como esto:
<Group description=”Post Title” selector=”h3.post-title, .comments h4″>
     <Variable name=”post.title.font” description=”Title Font” type=”font”
         default=”normal normal 18px Arial, Tahoma, Helvetica, FreeSans, sans-serif” value=”normal normal 18px Gudea, Utopia, ‘Palatino Linotype’, Palatino, serif”/>
   </Group>
Cambiando Gudea por el nombre de tu fuente

Cambiando la fuente de las entradas:

En Plantillas dinámicas:

             1.- Haz click en el recuadro de HTML y presiona Ctrl+F para buscar, busca
              <Group description=”Page”>
              2.- Modifica el valor value=”‘Helvetica Neue Light’ cambiando la parte que 
              dice Helvetica Neue Light por el nombre de tu fuente. Ejemplo:
              De value=”‘Helvetica Neue Light’ cambiarías a algo como
              value=”‘Gudea’ , pero en vez de Gudea escribirías el nombre de tu fuente, es 
              importante que no borres las comillas.
 
              3.- Guarda los cambios y listo.
 
El código completo debió cambiar de esto:
<Group description=”Page”>
     <Variable name=”page.text.font” description=”Font” type=”font”
         default=”‘Helvetica Neue Light’, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif” value=”‘Helvetica Neue Light‘, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”/>
a esto, pero cambiando el nombre de Gudea por el de tu fuente:
<Group description=”Page”>
     <Variable name=”page.text.font” description=”Font” type=”font”
         default=”‘Helvetica Neue Light’, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif” value=”‘Gudea‘, HelveticaNeue-Light, ‘Helvetica Neue’, Helvetica, Arial, sans-serif”/>
 

En las plantillas normales:

              1.- Busca en el cuadro de HTML con Ctrl+F .post-body, debería aparecer un código como el
              siguiente:
                                   .post-body {
              line-height: 1.4;
              font-size: 110%;
              position: relative;
              }
              2.- Añade antes de font-size: 110% el siguiente código, cambiando Gudea por el
             nombre de tu fuente:
             font-family: Gudea;
             Nota: Es muy importante que respetas las mayúsculas y minúsculas del nombre de tu fuente, 
             además de añadir punto y coma al final del código, si no lo haces no funcionara
              3.- Guarda y listo.
El código debe de haber cambiado de:
                                  .post-body {
              line-height: 1.4;
              font-size: 110%;
              position: relative;
              }
a esto:
                                   .post-body {
              line-height: 1.4;
              font-family: Gudea;
              font-size: 110%;
              position: relative;
              }
 

Y eso sería todo para añadir una fuente nueva a blogger y utilizarla en títulos y entradas, si tienes alguna duda o quieres decirme tu opinión, no dudes en dejar un comentario, siempre será bien recibido.

Noé Reyes Guerra

Soy un jóven aficionado a la tecnología, felíz usuario de Linux, Firefox y Android, partidario del software libre.

4 comentarios en “Como agregar Google Fonts a tu blog (Blogger)

  1. Hola!! gracias por toda esta información, es muy útil. Y cómo sería para poner alguna palabra concreta en la entrada del blog? sin llegar a cambiar todo el texto? Gracias!

    1. Hola Andrea, para cambiar sólo una palabra en Blogger puedes seleccionarla y después ir al menú de fuentes de Blogger (con el icono de un “F”), aunque sólo puedes seleccionar 7 fuentes.
      Si quieres incluir alguna fuente que no este en Blogger, tienes que ir a la pestaña HTML del editor y escribir
      (span style= “font-family:nombre-de-la-fuente”)
      antes de la palabra que quieras cambiar, donde escribirías el nombre de la fuente entre las comillas, y después escribirías
      (/span)
      después de la palabra, por ejemplo:
      (span style=”font-family:Verdana”) Technodyan (/span)

      P.D: Deberás cambiar los “( )” que escribí por “< >” para poder utilizar el código, esto lo hice por que Blogger no permite comentar con esas etiquetas HTML.

      Espero que te haya sido de ayuda, si tienes algún problema, no dudes en dejar un comentario.

    1. Hola Rainquel, eso puede suceder porque estes usando una plantilla personalizada o descargada de Internet, aunque como ya no uso Blogger puedo estar equivocado y quizás hayan cambiado algo. Lamento no poder ayudarte con esto, pero te recomiendo que comentes tu problema en Oloblogger.com o Ciudadblogger.com, dos páginas web de expertos en Blogger que de seguro podrán ayudarte a solucionar el problema. Saludos.

Deja un comentario

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