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).
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;
}
