Aprende a utilizar la API de Google Font
Google liberó recientemente una API llamada Google Font, la cual entre otras cosas nos permite utilizar fuentes externas en nuestro sitio web o blog de forma muy fácil, en este tutorial les voy a usar la API e integrarla en cualquier sitio web, esto como beneficio es mucho ya que son fuentes open-source, ligeras y por supuesto corriendo de la mano de Google la velocidad de descarga de las mismas es alta, por lo que no habrá problemas de que no se carguen.
Integrando el código CSS
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 y el segundo es directamente en una regla CSS:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name">
En la primera acción podemos ver que se importa la fuente desde los servidores de Google, sin embargo es necesario ir a su lista de fuentes para poder definir el nombre de la fuente que queremos usar. Hay que recordar que en “Font+Name” va el nombre de la fuente y si se tiene espacios en el nombre hay que reemplazarlos con un signo “+”.
Ahora, ya que importamos la fuente necesitamos llamarla para usarla en nuestro blog, y eso es con CSS, así que vamos a ver un ejemplo del uso:
CSS selector {
font-family: 'Font Name', serif;
}
Esta es una nueva regla CSS, “CSS selector” es el nombre de la regla, puede ser clase, etiqueta o avanzada dependiendo de donde quieras que aparezca la fuente. “Font Name” es el nombre de la fuente que seleccionamos en el primer paso y ahora si puedes usar espacios.
Sin embargo si no quieres complicarte la vida puedes crear una capa conde este el texto que aparezca la fuente en el texto, simplemente agrega esto:
<div style="font-family: 'Font Name', serif;">Tu texto</div>
Donde solo hay que cambiar donde dice “Font Name” por el nombre completo de la fuente y listo.
Ejemplo práctico
Desde Kabytes hacen un ejemplo sencillo con el uso de diferentes fuentes, yo les dejo el código HTML para que lo prueben y comprueben que si sirve, el resultado final está en este enlace, y solo decir que si quieren importar más fuentes basta agregar “|” después del nombre de la fuente para separar y que el navegador entienda que son más fuentes las que tiene que importar.
<html>
<head>
<title>Ejemplo de uso de la API de Google Fonts</title>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">
<style>
body, html {
margin: 0;
padding: 0;
background: #ccc;
text-align: center;
font-size:30px;
font-family: arial;
}
h1, h2, h3{
margin-bottom:10px;
padding:0;
}
h1{
font-family: 'Tangerine', serif;
color: green;
}
h2{
font-family: 'Inconsolata', serif;
color: blue;
}
h3{
font-family: 'Droid Sans', serif;
color: red;
}
</style>
</head>
<body>
<h1>Escribiendo con Tangerine!</h1>
<h2>Escribiendo con Inconsolata!</h1>
<h3>Escribiendo con Droid Sans!</h1>
</body>
</html>
Reviewed by Marcos Rivas Rojas
on
lunes, mayo 24, 2010
Rating:
