Google Font Library – Fuentes para tu Web

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.

  1. <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
  2. <style type="text/css">
  3. body {
  4.    font-family: 'Lobster', serif;
  5.    font-style: italic;
  6.    font-size: 24px;
  7. }

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.

[code]http://fonts.googleapis.com/css?family=Lobster|Cantarell[/code]

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


christian
Publicado: 21/05/2010 8:18 am

Buenisimooooooo !!!

christian portuguez
Publicado: 21/05/2010 8:20 am

pense q demoraria en la carga lo acabo de probar y va de 100 % bien

Gustavo
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.

crashman
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

crashman
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?

Jero
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??

unijimpe
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.

leifsk8er
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.

Javier
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.

 

Comentar

En este blog los comentarios están moderados, serán mostrados cuando el administrador los apruebe. Por favor, evita comentarios ofensivos u obscenos por que no serán aprobados.
Si deseas publicar código fuente debes hacerlo entre las etiquedas <code> y </code>, además debes reemplazar los carácteres < por &lt; y > por &gt;.

(Requerido)

(Requerido, no será publicado)

(Requerido)

(Tags aceptados: <a> <em> <strong> <code> <ul> <li>)