Tutorial de Fuentes de Google

Google vino con una nueva idea en su lista de juguetes para la web.  Un directorio de fuentes que te permite como desarrollador web incluir algunas fuentes “elegantes” en tus páginas sin esfuerzo.

De qué se trata el Directorio de Fuentes de Google? 

Todas las fuentes en el Directorio de Fuentes de Google están bajo licencia de código abierto, las cuales, te permite usarlas en cualquier sitio web, desde un blog privado hasta un gran sitio comercial. La idea parece ser buena y viene a completar el API de librerías AJAX de Google.

Por ahora sólo hay algunas pocas fuentes disponibles, pero con el tiempo, creo que la lista crecerá.

Hay dos maneras de usar esto en tu sitio. 

La primera es simple y sólo requiere de un fichero CSS obtenido de los servidores de Google como se muestra debajo:

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine">
 
    <style>
      body {
        font-family: 'Tangerine';
        font-size: 48px;
      }
    </style>

Necesitas especificar la familia de la fuente y si contiene espacios debes reemplazarlos con un signo “+”.

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Droid+Sans">

Puede cargar múltiples fuentes en una llamada simple.   Esto disminuirá el tiempo de carga porque solo utilizará una petición http.  Las fuentes múltiples serán separadas por un signo “|”  (carácter de túnel).

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans">

Normalmente, las fuentes son cargadas usando la versión regular, pero tendrás mas control sobre las fuentes cargadas si usas algún selector para el estilo y peso usando un signo “:” (dos puntos), y si son mas de un valor, se separan por una “,” (coma)

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Tangerine:bold,bolditalic">

El estilo y peso de la fuente pueden ser especificados usando un nombre completo, una abreviación o un valor numérico (para el peso)

bold:b
bold:700
italic:i
bolditalic:bi

<link rel="stylesheet" type="text/css" 
          href="http://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700">

Ten en cuenta que no todas las fuentes tienen los estilos que puedas necesitar, así que en primer lugar, verifica en el directorio de fuentes si lo tiene.

La segunda opción

La segunda opción para cargar las fuentes es usar el cargador web (Script de Java) que Google ofrece para eso.  Este script puede ser llamado directamente (lo que es mas rápido) usando las funciones API de AJAX.  La principal ventaja de este método es que puedes cargar fuentes proveídas por TypeKit y Google o desde cualquier otro proveedor de fuentes al mismo tiempo desde la misma librería.

WebFont.load({
 
    google: {
      families: [ 'Tangerine', 'Cantarell' ]
    },
 
    typekit: 'myKitId',
 
    custom: { 
       families: ['OneFont', 'AnotherFont'],
       urls: [ 'http://myotherwebfontprovider.com/stylesheet1.css',
       'http://yetanotherwebfontprovider.com/stylesheet2.css' ] 
   }
});

La desventaja de este método es el incremento en el tiempo de carga en comparación con el método simple.

Otros aspectos que considerar. 

Cargar fuentes externas es lento, por lo menos la primera vez, hasta que la fuente se encuentre en caché en el ordenador del visitante.  No lo sobre utilices.

Necesitas especificar una versión de reserva de la fuente en caso de que tu navegador no lo soporte. Aquí el navegador usa una fuente “serif” en caso de que no sea capaz de descargar la “Tangerine”.

  body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }

El asunto de la navegación cruzada

Caga navegador se comporta de una manera diferente, por supuesto, siendo IE el peor. Para lograr un comportamiento consistente a través de todos los navegadores soportados debería usar el cargador web.  Esto le brinda la oportunidad de mostrar elementos con estilo con una fuente inicial hasta que la fuente requerida sea cargada, y cuando esto ocurra, cambiarla.

    .wf-inactive p { // Show paragraphs in serif font until fonts have loaded.
    font-family: serif
  }
  .wf-active p { // Show paragraphs in Tangerine when the fonts have loaded.
    font-family: 'Tangerine', serif
  }

Si el numero de fuentes incrementase, entonces el Directorio de Fuentes de Google sería una buena alternativa en comparación con otros proveedores de fuentes para web que ofrecen esto como un servicio pago.  Pero aún puede divertirse con el, estoy seguro que Google continuará mejorando este servicio.

Mira la demostración

Una página de demostración puede ser vista aquí. Es interesante ver como se comporta IE

Más recursos

Directorio de Fuentes de Google
API del Directorio de Fuentes de Google

y por supuesto

Typekit

Te recomendamos