Google Font Library es un servicio recién lanzado por Google que permitirá incluir fuentes o tipografías adicionales a las tradicionales con la cual se puede dar un mejor aspecto a diseño de un website o blog.
Para ello Google aloja en sus servidores fuentes gratuitas las cuales podemos integrar en nuestro web gracias a un API que han creado. Esto hará que podamos incluir tipografías diferentes a las tradicionales (Arial, Verdana, Times, etc.) que nos ayudará a dar un mejor acabado a nuestro web que de otra forma lo haríamos utilizando imágenes o flash.
Utilizar Google Font Library
Lo primero es elegir la fuente para ello pueden ver el listado de fuentes disponibles con todas sus variantes (normal, italic, bold, etc.) en Google Font Directory. Primero cargamos la tipografía utilizando el tag link y luego podemos utilizar la tipografía como si fuera una fuente estandar. Por ejemplo escogemos la fuente ‘Lobster’ y deseamos aplicarlo a los elementos h1 de nuestra página.
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'> <style type="text/css"> body { font-family: 'Lobster', serif; font-style: italic; font-size: 24px; } </style>
Si deseas incluir mas de una fuente debes separar los nombres de las fuentes por el carácter «|» en la ruta, por ejemplo si deseamos utilizar las fuentes Lobster y Cantarell, tendríamos.
http://fonts.googleapis.com/css?family=Lobster|Cantarell
Como pueden ver es sencillo de utilizar y como las fuentes están alojadas en los servidores de Google nos garantizan una excelente velocidad de carga. Para demostrar el funcionamiento de este servicio pueden ver un ejemplo funcionando en google-font donde hemos utilizado dos fuentes diferentes, pueden ver el código fuente para ver como hemos utilizado este servicio.
Font previewer
Para facilitar el uso de esta librería, pueden visitar Font Previewer en donde pueden seleccionar la tipografía, variante, tamaño y demás opciones y tendrán automáticamente generado el código que deben utilizar en su web.
Compatibilidad
Esta librería tiene sus limitaciones y es que solo funciona en las navegadores mas modernos. Los navegadores compatibles con esta librería son:
- Google Chrome: versión 4.249.4+
- Mozilla Firefox: versión: 3.5+
- Apple Safari: versión 3.1+
- Microsoft Internet Explorer: versión 6+
Google Font API no es compatible con: iPhone, iPad, iPod, o Android. En el caso de estos dispositivos el browser mostrará la siguiente tipografía en la lista de tipografías de la hoja de estilos.
Comentarios Total 9 comentarios
Publicado: 21/05/2010 8:18 am
Buenisimooooooo !!!
Publicado: 21/05/2010 8:20 am
pense q demoraria en la carga lo acabo de probar y va de 100 % bien
Publicado: 21/05/2010 8:22 am
Hola, estuve analizando el tema, y lo que hace la API de google no es más que cargar el archivo de las fuentes a través de un CSS con @font-face utilizando el siguiente código:
@font-face {
font-family: 'Lobster';
font-style: normal;
font-weight: normal;
src: local('Lobster'), url('http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg') format('truetype');
}
/code>
Donde 'http://themes.googleusercontent.com/font?kit=X-CahsKZZcJfSyZ_tX4ptg' no es ni más ni menos que el archivo formato ttf de la fuente.
Esto quiere decir que si utilizamos @font-face en nuestro CSS podemos cargar cualquier fuente que subamos a nuestro servidor.
Lo que veo de malo es que las fuentes no se suavizan, se ve le "serruchito" de los píxeles y algunas quedan feas.
Publicado: 21/05/2010 8:22 am
Yo también hice un pequeño tutorial en mi blog. Pero no conocía eso de incluir más de una fuente en una misma llamada de la API con sólo poner |.
http://promineostudios.com/blog/articulo/google-font-usa-cualquier-fuente-libre-en-tu-web
Publicado: 21/05/2010 8:25 am
@Gustavo: Pero @font-face no está en IE6 y éste sistema de google si es compatible con la versión 6, no?
Publicado: 21/05/2010 9:40 am
Es raro, estoy usando FF 3.6.3 y no me funca. A alguno le pasa lo mismo??
Publicado: 21/05/2010 10:55 am
Gustavo, respecto a la propiedad @font-face debes asegurarte que tus visitantes tengan navegadores que la soporten, puedes ver una lista detallada en: @font-face browser support.
Ahora la ventaja que te da Google Font Library es que las fuentes estan alojadas en los servidores de Google, eso significa que gracias a la cantidad de servidores te aseguras que los usuarios de tu página no perderán mucho tiempo en la carga de las fuentes, también estas ahorrando ancho de banda para tu servidor.
Publicado: 27/05/2010 8:28 pm
Yo utilizo firefox 3.0.17 en ubuntu y no tira :S
Si carga en unos y otros no…. ¿donde está la grandeza del asunto? Por que para eso me da lo mismo guardar la fuente en mi servidor y no dependes de nadie.
Publicado: 29/09/2010 3:07 pm
Está bastante bien este invento, pero por ahora las fuentes no incorporan muchos de los caracteres usados en el castellano, empezando por la Ñ. Así que por ahora no sirve para una web en castellano.