Cómo utilizar Google Fonts en tu blog

13.11.14

Después de la información de ayer acerca de Google Fonts, espero que hayas descansado!

Te voy a enseñar cómo puedes utilizar las fantásticas fuentes que seguro que ya has mirado y remirado para tu blog.


Utilizar Google Fonts




Supongo que ya has estado buscando y has dado con la fuente que quieres utilizar.

Tendrás algo parecido a esto. En este caso he escogido la fuente Playfair Display.

fuente playfair

Vamos a ver qué opciones tenemos aquí


1. Uso rápido


Si clicamos en la pequeña flecha dentro del recuadro, iremos a la página que nos interesa para obtener el código que pegaremos en el blog.


Estilo de fuente


Primero de todo ves los diferentes estilos disponibles de la fuente que has escogido. Tienes que marcar aquél o aquellos que quieres utilizar en tu blog.

estilos fuente


Si te fijas, a la derecha, hay como un cuentakilómetros y realmente viene a ser la misma idea. Te marca qué impacto tiene el estilo de fuente que has seleccionado, en la carga de tu blog.

velocidad carga fuente

O sea, muy importante, sólo marca aquellos estilos que sean imprescindibles para tu blog. Si te fijas, si los marcas todos, la aguja cada vez se acerca más al color rojo, lo que indica que la carga de tu blog será muy lenta.

Carácteres


Aquí te ofrecen tres tipos de caracteres, los que te interesan para escribir español es "Latin", las otras opciones son letras que no utilizamos en nuestro idioma.

Código para tu blog


El código que hay a continuación lo tienes que añadir a tu código HTML del blog (Plantilla --> Editar HTML).


  1. Entras en tu código HTML.
  2. Buscas <head> (con control+f)
  3. Justo después añades el código de tu fuente
  4. Y lo más importante: En el código que has copiado de Google Fonts le falta un pequeño símbolo / justo antes del último >


    Codigo Google Fonts
Para que quede más claro te muestro dónde he puesto  la barra /.

Al final de este código tenías

                                 
                             <link ……… type='text/css'>


y debes tener

                            
                                <link ……… type='text/css'/>



Código CSS


Sólo te queda poner el código de este apartado allí donde quieras utilizar la fuente. 

En mi casi sería este

                       
  font-family: 'Playfair Display', serif;



2. Ventana emergente


Aquí podrás encontrar todo tipo de información de la fuente.

Al principio te cuentan un poco de historia acerca de la tipografía escogida.

En el menú horizontal tienes varias opciones


  • Conjunto de caracteres (Character Set)
    Podemos ver, además de sus estilos, cómo es cada una de las letras, números y símbolos en esta fuente. (en esta imagen no están todas)

    Caracteres fuentes
  • Estadísticas (Statistics)
    Puedes ver cuantas veces se ha accedido a esta fuente en el último mes y su utilización por países.

    Estadisticas fuentes
  • Combinación de fuentes (Pairing)
    Te hacen varias propuestas de fuentes que van bien con la que tu has escogido. Esto es muy práctico en el caso de que te guste una fuente en concreto y no sepas con qué otra se puede combinar.

Ejemplo


El código de más arriba tanto lo puedes utilizar en Plantilla --> Personalizar --> Avanzado --> Añadir CSS, por ejemplo definiendo el estilo de los subtítulos .h3, sería


  h3 { 
    font-family: 'Playfair Display', serif; 
    color: #4bceb4; 
  }



o en medio del código HTML cuando escribas, por ejemplo, un post



  <div style="color: #ff7b00; font-family: 'Playfair Display', serif;"> 
    TU TEXTO     
  </div>



y lo verías así

MAÑANA ES VIERNES!





Ahora ya puedes poner tu blog aún más bonito de lo que es! Estoy segura que tu combinación de letras triunfará!

Laura

¿Te ha gustado lo que has leído?
Muchas gracias por compartirlo en tus redes sociales!
Tus contactos y yo te lo agradeceremos! :-)

¿Quieres contenido exclusivo para mejorar tu blog?
Suscríbete y recibirás AHORA la guía para dominar Blogger HOY!
Tu blog no pasará inadvertido.
Dejará huella.