En este post introducimos brevemente las herramientas y utilidades que nos ofrece Google para el uso y configuración de distintos elementos tipográficos en nuestras páginas web.
En concreto, abordamos:
- el directorio de fuentes de Google
- el API de fuentes de Google
- el previsualizador de fuentes de Google (Google Font Previewer)
- la librería de carga de fuentes (WebFont Loader)
Publicidad
El directorio de fuentes de Google (Google Font Directory)
El directorio de fuentes de Google (Google Font Directory) nos permite navegar por todas las fuentes tipográficas disponibles a vía el API de fuentes de Google. Todas las fuentes en el directorio están disponibles para ser usadas en nuestros sitios web bajo una licencia de código abierto (SIL Open Font License, 1.1) y están alojadas en los servidores de Google.
Algunas tipografías del directorio de fuentes de Google
El API de fuentes de Google
El API de fuentes de Google nos facilita la incorporación de fuentes a cualquier página web. Sus beneficios son:
- Se trata de fuentes tipográficas de alta calidad y código abierto.
- Son visualizadas correctamente en la mayoría de los navegadores.
- Es una herramienta extremadamente fácil de usar.
Por ejemplo, el texto siguiente se utiliza la fuente “Tangerine”:
La aplicación de un tipo de letra a nuestra página web es fácil: simplemente tenemos que añadir en el <head> de nuestro código HTML el enlace:
<link href='http://fonts.googleapis.com/css?family=familia-de-la-fuente' rel='stylesheet' type='text/css'>
El API generará el código CSS específico y necesario para que el navegador del usuario pueda utilizar la fuente en la página. Desde ese momento, solo tenemos que utilizar el tipo de letra en las hojas de estilo de nuestra página, por ejemplo:
h1 (font-family: "familia-de-la-fuente', arial, serif;)
El previsualizador de fuentes de Google (Google Font Previewer)
Google Font Previewer, es una aplicación para previsualizar el resultado final de nuestras fuente y obtener el código resultante para aplicarlo directamente a nuestra web.
Google Font Previewer
Esta herramienta nos permite, simplemente utilizando el ratón, modificar la variante de la fuente (negrita, cursiva, etc…), el tamaño, su transformación (a mayúsculas, minúsculas, capitalizado…), el espaciado e incluso la sombra de la fuente que será compatible con la mayoría de los navegadores. Cuando ya hayamos encontrado el tipo de letra que más nos conviene para embeber en nuestra página web, sólo nos queda copiar el código que se muestra debajo de la sección de prueba y pegarlo en la configuración de nuestro sitio web u hoja de estilos.
La librería de carga de fuentes (WebFont Loader)
El WebFont Loader es una librería JavaScript co-desarrollada por Google y TypeKit que nos da más control sobre la carga de las fuentes de la que ofrece el API de fuentes de Google, proporcionandonos eventos que se activan en diferentes etapas de la carga de las fuentes. El código fuente del WebFont Loader está disponible en un repositorio GitHub.
The Herramientas de Google para fuentes by AlmacenPlantillasWeb, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Spain License.
Aparte de que el ejemplo que habeis puesto con tangerine no funciona (almenos en Safari y Firefox para Mac) el catálogo de fuentes de Google es demasiado escueto.
Una opción mucho más interesante, en mi opinión, son las WebFonts de Fonts com. Permiten elegir entre todo el catálogo de Fonts.com (que son casi todas las tipografias existentes) y inserirlas en nuestra hoja de estilo de una manera muy sencilla. Yo lo he probado y funciona correectamente.
El sitio web es http://www.webfonts.fonts.com/.
Un saludo.
Hola, gracias por tu comentario.
Lo del ejemplo con la fuente Tangerine: nosotros lo hemos comprobado con IE6, 7, 8 y FF 3.6.8 y funciona OK.
Sobre lo escueto del catálogo: efectivamente. Es de esperar que aumente el número de fuentes disponible. Su valor añadido, desde nuestro punto de vista, es que son de código libre.
Respecto a webfonts.fonts.com: completamente de acuerdo. Probablemente sea el catálogo de fuentes más amplio e importante.
¡¡de nuevo gracias por tu aportación!!