Google liberó hace pocos dÃas una API llamada Google Fonts, la cual nos permite utilizar fuentes (diferentes a las que solemos tener normalmente) en las letras de nuestras webs (externas a nuestro sitio web).
En esta guÃa quiero enseñaros a usar la API con un ejemplo muy sencillo para integrarla en cualquier sitio web, el beneficio de usar estas letras es mucho, ya que son fuentes open-source, ligeras y por supuesto corriendo de la mano de Google, por lo que la velocidad de descarga de las mismas, es alta. Su uso es muy sencillo como veremos.
Lo primero que hay que saber es que hay que usar CSS para poder integrar la fuente, para ello hay dos pasos para hacerlo, el primero es usar la etiqueta <link> para importar la fuente (entre las etiquetas <head> y </head> de tu página) y el segundo es directamente en una regla CSS:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Font+Name“>
Por ejemplo vamos a activar la tipografÃa Josefin Sans Std Light:
<link rel=”stylesheet” type=”text/css” href=”http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light“>
Y ya sólo nos quedarÃa definir algún selector en CSS con este tipo de fuente (en tu archivo estilos.css). Por ejemplo ponemos que todos los tÃtulos en H2, sean con ese tipo de letra:
h2{font-family: ‘Josefin Sans Std Light‘, serif; color: green}
Nótese que he puesto en negrita el nombre de la letra que yo he usado. Si tu quieres utilizar otra letra tendrÃas que cambiar el nombre de la fuente en cada caso. Aquà tenéis el listado de todas las fuentes que se pueden usar. Supongo que irá creciendo con el tiempo.
Hagamos una página completa usando fuentes de letra de Google. Utilizaremos la fuente Josefin Sans Std Light para el texto en azul en H1 y la fuente Doid Sans para el texto en verde en H2:
Pincha aquà si quieres ver este ejemplo funcionando
<html>
<head>
<title>Ejemplo de uso de la API de Google Font</title>
<link rel=”stylesheet” type=”text/css”href=”http://fonts.googleapis.com/css?family=Josefin+Sans+Std+Light|Droid+Sans”>
<style>
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-size:20px;
font-family: arial; }
h1, h2, h3{margin-bottom:10px; padding:0;}
h1{font-family: ‘Josefin Sans Std Light’, serif; color: blue}
h2{font-family: ‘Droid Sans’, serif;color: green}
</style>
</head>
<body>
<h1>El tipo de fuente de este texto es Josefin Sans Std Light!</h1>
<h2>El tipo de fuente de este texto es Droid Sans!</h1>
</body>
</html>
[...] This post was mentioned on Twitter by Nacho Alonso, SoyGik.com {sg}. SoyGik.com {sg} said: GuÃa para utilizar la API de Google Fonts http://goo.gl/fb/HLjeA [...]
Falta comentar que se puede hacer la importación de la fuente de manera alternativa al <link> mediante el uso del @import en la hoja de estilos.
Por ejemplo, para importar la fuente Molengo, se harÃa:
@import url(http://fonts.googleapis.com/css?family=Molengo);
Un saludo!
Cierto! Gracias @Tauron32 !
Muy buena la info para pincipiante como yo, gracias amigo!