Google lo ha vuelto a hacer. Ayer mismo nos ha sorprendido anunciando Google Font API y Google Font Directory. Analizamos estos dos nuevos proyectos con los que pretenden facilitarnos el uso de fuentes de letra personalizadas en nuestras páginas de manera relamente sencilla. ¡Tutorial incluído!

Autor:

Hola! Soy diseñador, programador web y cofundador de la startup Cokidoo, desarrollamos aplicaciones web a gran escala y comercio electrónico, aplicaciones para móviles y advertising. Puedes seguirme através de mi twitter y ver algunos de mis themes en Themeforest. También soy aficionado a la fotografía.
Descarga Demostración

Introduciendo Google Font Api y Google Font Directory

Ayer 19 de Mayo de 2010 los chicos de Google presentaban dos grandes y buenas noticias para los desarrolladores / diseñadores web: Google Font API y Google Font Directory.

Su idea es compartir con todos nosotros una biblioteca de fuentes de letra amplia, de gran calidad y open source, conocida como Google Font Directory.

Google comparte una gran biblioteca de fuentes de letra open source listas para utilizar de forma realmente sencilla mediante su Google Font API.

Estas fuentes de letra podrán ser utilizadas mediante la Google Font API con el fin de mejorar el aspecto visual de todos nuestros diseños de manera realmente rápida y sencilla.

Han pasado muchos años y las fuentes de letra “no estándar” siguen sin tener un uso claro y sencillo, teniendo que recurrir a hacks, librerías javascript, objetos flash… todo esto pretende cambiar con CSS3 y su propiedad @font-face, y Google tratará de servir todas estas fuentes através de la nube según los requerimientos de cada navegador.

Ventajas y compatibilidad con múltiples navegadores

Todos aquellos que decidan usar la Google Font API tendrán asegurada la compatibilidad con múltiples navegadores para cualquiera de las fuentes de letra de su biblioteca. Todas estas fuentes tendrán las ventajas de un texto normal y corriente:

  • Se comportan como texto normal, no hay canvas ni otros objetos.
  • Indexables y legibles para los buscadores.
  • Visualmente atractivas y sin pérdida de calidad al hacer zoom.
  • Accesibles a todo tipo de lectores de pantalla.
  • Rápido a la hora de cargar las fuentes.

Por si fuera poco, navegadores “obsoletos” como Internet Explorer 6 serán perfectamente soportados por la Google Font API sin aparantemente ningún tipo de hack, canvas ni derivados.

Cómo utilizar la Google Font API

Como nos comentan en su blog, el método de uso es realmente sencillo. Tan sólo necesitamos crear un enlace a la Google Font API especificando las fuentes de letra que deseamos usar y aplicarla mediante selectores CSS en donde deseemos:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Ontuts - Ejemplo de Google Fonts API</title>
		<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz' rel='stylesheet' type='text/css'>
		<style>
			body{
				font-family: 'Yanone Kaffeesatz', serif;
				font-size: 72px;
				text-shadow: 4px 4px 4px #bbb;
				font-weight: 700;
				text-align: center;
			}
		</style>
</head>
<body>
	¡Ontuts arrasa por donde pasa!
</body>
</html>

Este sería el resultado final:

Ejemplo Google Fonts API

Es realmente potente y sencillo, ¿verdad? No dejéis de mirar el html final que nos genera, es transparente, texto plano de toda la vida… pero con otro aspecto. Nada de canvas, objetos flash ni similares.

Reflexión final

Si bien todavía está en beta, como diseñador web me resulta realmente interesante ver que por fin podremos empezar a plantearnos el uso de fuentes de letra distintas a las habituales, que aporten mayor solidez a nuestros diseños sin necesidad de hacks, trucos baratos o imágenes en lugar de texto.

Me ha parecido una grandísima idea el hecho de que estén abiertos a que los diseñadores contribuyan a la biblioteca y seguramente en próximas semanas no parará de crecer.

Si bien puede parecer un problema, el hecho de que se aloje todo en los servidores de Google nos permitirá visualizar las fuentes de letra mucho más rápidamente ya sea por la velocidad con la que las sirven o por la cache que se irá acumulando a medida que visitemos más sitios que usen este método.

¿Qué opinión os merece a vosotros todo esto?

¿Necesitas desarrollar un proyecto web o para móviles? ¡Estamos disponibles!

Visitar Cokidoo

Cokidoo, los creadores de Ontuts, desarrollamos proyectos tecnológicos centrados en redes sociales y aplicaciones web, aplicaciones móviles y consultoría web y bases de datos.

Somos jóvenes, inquietos, versátiles, apasionados por la innovación y enfocados en las nuevas tecnologías. Con Ontuts tratamos de compartir nuestro conocimiento adquirido en los distintos proyectos, ayudando a la comunidad y mostrando nuestra capacidad tecnológica.

Si necesitas un presupuesto sin compromiso, estamos disponibles, no dudes en contactar con nosotros.

Comentarios en esta publicación (19 comentarios)

¿Te ha gustado esta publicación? ¡Puedes compartir tu opinión con todos nosotros! Simplemente pincha aquí mismo.

Espero vuestros comentarios, no me digáis que no es un notición :)

Creo que es útil pero tampoco es un notición.
¿Qué ventajas trae frente a @font-face? La única ventaja que puede ser es que tiene soporte para Firefox 2/3 (@font-face sólo funciona a partir de FF 3.5) pero cero que la mayoría de los usuarios que no usan IE se suelen preocupar en actualizar el navegador.

Saludos!

@jofralogo A mí me parece realmente importante el hecho de poder emplear fuentes de letras custom en cualquier navegador, incluído cosas como Internet Explorer 6 y 7, sin tener que recurrir a tricks “extraños”.

Estamos hablando de algo bastante gordo, no crees? Yo mismo he tenido que lidiar hace una semana con cufon y todos sus bugs, por no hablar de las soluciones flash… cada solución con problemas distintos, mal rendering, fuentes borrosas…

Te entiendo, Cufón es una castaña en toda regla xD. Pero @font-face no es ningún truco extraño y funciona hasta en IE 4 (http://webfonts.info/wiki/index.php?title=%40font-face_browser_support).

¿Porqué tengo que petar una web a javascritps si puedo hacer lo mismo con CSS?

Realmente, en navegadores modernos, esta API usa el @font-face como dice @jofralogo. Lo realmente importante de esto, es que funciona en navegadores antigüos perfectamente, todavía no sé como….

Estos de google… :D A mí sí que me parece una noticia cojonuda. Aún están un poco escasos de fuentes, pero a parte de eso, sólo veo ventajas :P Gracias por compartirlo! no lo conocía ;)

@jofralogo Sigo manteniendo mi opinión ^__^

@scumah Normal que no lo conocieras… ha salido ayer! ;)

Uhm… lo “único” que hacen es mirar el navegador (user agent ) que hace la petición y servir un CSS u otro.

http://code.google.com/intl/es-ES/apis/webfonts/docs/technical_considerations.html#Serving

Y respecto a los navegadores soportados:
* Google Chrome: version 4.249.4+
* Mozilla Firefox: version: 3.5+
* Apple Safari: version 3.1+
* Microsoft Internet Explorer: version 6+

http://code.google.com/intl/es-ES/apis/webfonts/faq.html#Browsers_Supported

@Juan Mellado muchas gracias por el apunte!

Uhm.. por lo aportado por @Juan Mellado, no da ninguna mejora frente a @font-face :/

@adrianmg: jofralogo wins! :P jeje

@jofralogo Sigues sin entender mi postura!! Q(‘__’ Q)

Supongo que en nuestro futuro cercano hay una saturacion, sobreexplotacion y aplicacion excesiva de este metodo, tal como paso con Flash y con las animaciones GIF y con los efectitos con javascript… :D

@josepzin Pasará como todas las modas o novedades… habrá gente que use estas cosas sin cabeza, y otros que trataremos de usarlas con coherencia y donde nos aporten algo ;)

Esto es realmente una muy buena noticia, y se me hace extraño que algunos no vean las ventajas:
No tienes que hospedar ni el css que llama a la fuente, ni la fuente, cosa con la que te ahorras ancho de banda, y en muchos casos, velocidad de carga y sólo debes hacer referencia al servidor de Google que si que son muy eficientes.. Exactamente como sucede con las APIs de las librerías AJAX que sirve Google APIs, para mi me parece genial.
En resumidas cuentas es lo mismo que @font-face, pero con las ventajas que mencioné arriba, y vaya que me atrevo a adelantar de que en un futuro habrá más fuentes disponiles en el catálogo.

en si ya mencionaron es una pequeñes hecha grande.. nos asombramos de lo simple.. solo es un baco de fuentes que como gran plus, te da un CSS que inicializa @font-face dependiendo de explorador, no hay ventaja sobre @font-face, solo que google se encarga de crossbrowsing, la ventaja dada en algun momento es la que menciona @luis Armando, solo es un baco tal como las API’s almacendadas en Google API, ahorrando el poco ancho de banda que pudiera consumir el trasferir el ttf o el eot, de allí en mas no hay gran novedad alguna ya que @font-face es parte de la definición CSS3 desde el 2002, bueno y que ya los exploradores se estan preocupando por dar soporte a este tercer nivel de CSS, aunque todo va mal.. me he desanimado tremendamente saber que IE9 solo sera para posteriores a Vista, quedando muchos de los usuarios de Window anteriores de HTML5 o CSS3, lo que es una oportunidad para los buscadores altenos aunque aun veo unos cuantos años de esperas para poder veneficiarnos de estas dos “”"nueva”"” tecnologías sin preocupaciones…..

de hecho es CSS2 :S

http://www.vespito.com/css2/

la pagina ya esta algo anticuada pero presenta como importar las fuentes para IE, solo falta la contraparte Mozilla y de mas, que las nuevas versiones ya dan soporte y por lo visto para ttf

Nastes

El problema de @font-face, es que para usarlas no solo tienes que tienes que tener licencia de distribucion y no solo de uso normal, excepto si usas paginas como la de google. De todas formas para todos los que esten interesados en esto, hay una pagina bastante buena con fuentes gratuitas. Ademas tienen un conversor de fuentes a distintos formatos. Te lo dejan hecho casi por completo.
http://www.fontsquirrel.com/

Mariana

NO puedo ver las tipografias con mozilla 3.6.7, alguien sabe porque puede ser???

Joshue

Yo las he utilizado ya para ina pagina y ahora que quiero utlizarlas para otra nueva, me dado cuenta de que hay problema. Me he fijado que con ciertos navegadores y ha ciertas configuraciones de pantalla, se ven borrosas. Y la prueba que me ha demostrado definitivamente esto es que, he cambiado esa fuente de google por una arial de toda la vida y no pasa esto, se ve perfecta. Hablo de textos a tamaños como 12 px. ¿Porque?