Cómo añadir Google Fonts en tu blog de Blogger o WordPress

Tutoriales Publicado por Claudia en agosto 31, 2011

Añadir fuentes personalizadas es una tendencia en diseño web que quizás nunca pase de moda: está muy en voga, le da un toque personal a tu blog y permite mejorar su estética. Y a la hora de hacerlo, Google Fonts es una de las mejores opciones, porque es fácil y rápido de incorporar y cuenta con una numerosa cantidad de familias de fuentes (actualmente, 247 y creciendo).

google web fonts

Cómo hacerlo, paso a paso:

1. Selecciona una fuente

Ve a Google Fonts y elige la fuente que más te agrade. Si a primera vista no logras decidirte, puedes añadir varias fuentes a tu colección (pulsando el botón “Add to collection“). Una vez que has escogido, haz click en “Use” o “Quick-use“.

2. Obtén el código

Hay fuentes con 1, 2 ó más estilos. Naturalmente, una fuente con más estilos te permite más opciones: normal, negrita, cursiva, etc.

Yo elegí la fuente “Droid Serif“, y seleccioné los 4 estilos que tiene.

El sitio me entregará un código como el siguiente:

1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'>

Dicho código debe ser incorporado exactamente después de <head>. En WordPress, en tu header.php, en Blogger, en Diseño/Edición de HTML (al inicio de tu plantilla).

Antes de guardar, no olvides añadir un slash (/) de cierre antes del signo “mayor que“, de modo que el código a añadir quede de la siguiente forma:

1
<link href='http://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic,700italic' rel='stylesheet' type='text/css'/>

3. Modifica los encabezados en tu hoja de estilos

Busca los lugares donde hay encabezados (h1, h2, h3, etc.), e incorpora el nombre de la fuente como normalmente lo harías con cualquier otra fuente, usando la propiedad “font-family“.

Ejemplo:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
}

Nótese que aquí también se utiliza la propiedad “font-weight“. En este caso, así como en el de muchas otras fuentes, “400” es normal y “700” es bold o negrita.

También puedes cambiar el estilo a cursiva (o itálico) con la propiedad “font-style“:

h1 { 
font-family: 'Droid Serif', Arial, serif; 
font-weight: 400; 
font-style: italic;
}

Finalmente, aquí hay otro ejemplo, que incorpora además la propiedad “text-shadow“:

#header h1 {
font-family: 'Droid Serif', Helvetica, arial, sans-serif;
color: #000;
font-size: 40px;
font-weight: 700;
font-style: italic;
text-shadow: 2px 2px 0 #E5E0D0;
}
Compártelo!
7 Comentarios en Cómo añadir Google Fonts en tu blog de Blogger o WordPress
  1. Información Bitacoras.com…

    Valora en Bitacoras.com: Añadir fuentes personalizadas es una tendencia en diseño web que quizás nunca pase de moda: está muy en voga, le da un toque personal a tu blog y permite mejorar su estética. Y a la hora de hacerlo, Google Fonts es una d……

  2. Armani Watches Sale dice:

    Quattro Passi per una vita di successo: 1, solitaria durata nel tempo; 2, resistere alla tentazione, 3, sanno dare, 4, imparare a scegliere
    Hanno detto che la rete era falso, ho riso, come se la realtà è davvero la stessa

  3. Sandra dice:

    Hola! siempre me parecen muy buenos tus articulos y gracias a este pude cambiar el tipo de letra de los titulos de mis entradas, pero no sé que codigo poner para cambiar el tipo de letra de las entradas, ( osea de todo el texto) me pudieras ayudar? gracias de antemano!

  4. Claudia dice:

    Sandra:
    Se cambia la propiedad “font-family” en los encabezados: h1, h2, h3, etc.

    Ejemplo:

    .post h3 {
    font-family: font-family: ‘Droid Serif’, Helvetica, arial, sans-serif;
    }

    Antes tienes que cargar la fuente como se indica más arriba.

  5. Sandra dice:

    Muchas gracias por responder tan rápido! Pues ya lo hice y no pasa nada =( sólo pude cambiar el tipo de letra de los titulos, pero no del contenido de las entradas… en fin seguiré intentando… Muchas gracias otra vez!

  6. Renata dice:

    Muchas gracias. Me ha funcionado bien. Es mejor así que instalar otro plugin más!

  7. Jeferson dice:

    muchas gracias me ha funcionado de super 😀

Deja tu comentario
Tu Comentario