Para minimizar el problema los diseñadores emplean las denominadas “web safe fonts”, que son las fuentes que probablemente tendrán instaladas la mayoría de usuarios y ofrecen alternativas para aquellos que no las tengan.

Ejemplo de CSS:

p{font-family:"Tahoma", Geneva, sans-serif}

En este caso los párrafos usarán la fuente Tahoma siempre que esté presente, la fuente Geneva en caso de no estarlo, o una fuente sans-serif cualquiera si las dos anteriores no están disponibles.

Aquí pueden consultarse estadísticas sobre la disponibilidad en sistemas Windows y Mac de algunas fuentes consideradas “web safe”.

¿Y si necesito usar otras tipografías?

Aunque la mayoría de diseños puede ser suficiente usar unas pocas fuentes “web-safe”, otros diseños pueden requerir tipografías no estándar y en ciertas aplicaciones web puede necesitarse mayor control sobre las fuentes.

El segundo caso es con el que me he topado recientemente en un proyecto: cónsiderese una aplicación web que incluya un editor de texto WYSIWYG (estilo Word) en el que los usuarios puedan formatear el texto y visualizar el resultado mientras editan.

En una aplicación así, la solución de ofrecer la posibilidad de editar el texto con un conjunto de fuentes consideradas web-safe no es una buena idea, ya que muchos usuarios no las tendrán disponibles y el formateo fallará en esos casos.

Google Web Fonts al rescate

Por suerte Google ofrece un servicio para ayudar a los desarrolladores con este problema, es Google Web Fonts, una colección de fuentes para web de libre distribución que podemos usar en nuestros diseños simplemente añadiendo la hoja de estilos correspondiente a la tipografía.

Tag para incluír en la página la fuente “Condiment”:

<link href='http://fonts.googleapis.com/css?family=Condiment' rel='stylesheet' type='text/css'>

Como de costumbre Google ofrece además una API para desarrolladores y una librería Javascript para quienes necesiten más control, ambas sirven para lo mismo pero Google recomienda el uso de la librería.

WebFont Loader

WebFont Loader es la librería de Javascript que permite cargar fuentes de Google Web Fonts además de otros proveedores, Google aloja esta librería y permite su uso de forma pública por lo que basta con incluirla con la siguiente línea:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>

Después para cargar fuentes sólo tendremos que hacer lo siguiente en nuestra aplicación:

<script type="text/javascript">
    WebFont.load({
        google: { families: [ 'Aclonica','Cabin'] }
    });
</script>

WebFont Loader también ofrece la posibilidad de responder a ciertos eventos que nos permiten saber como evoluciona la operación de carga, así por ejemplo el evento active(); indica que se ha terminado de intentar cargar todas las fuentes, fontactive() es llamado cuando una fuente en concreto ha sido cargada con éxito, etc. Consultar el resto de eventos disponibles aquí.

El siguiente ejemplo, que también emplea la librería jQuery para mayor simplicidad, hace lo siguiente:

1. Intenta cargar las fuentes específicadas.
2. Muestra en la página una lista de las fuentes que se han cargado formateando cada elemento con dicha fuente.
3. Muestra una lista de las fuentes que no se han podido cargar.
4. Muestra un mensaje cuando todas las operaciones han terminado.

<script type="text/javascript">
    $(function() {
        $("body").append('<ul id="cargadas"><h2>Se cargaron con éxito las siguientes fuentes:</h2></ul><ul id="fallidas"><h2>Las siguientes fuentes fallaron:</h2></ul>');
        WebFont.load({
            google: { families: [ 'Aclonica','Cabin','Fake Font 1', 'Fake Font 2'] },
            active: function() {alert('Listo !');},
            fontactive: function(fontFamily) {
                $("#cargadas").append('<li style="font-family:'+fontFamily+';">'+fontFamily+'</li>');
            },
            fontinactive: function(fontFamily) {
                $("#fallidas").append('<li>'+fontFamily+'</li>');
            }
        });
    });
</script>

Esta es la aproximación que he utilizado en mi proyecto, la aplicación carga un conjunto de fuentes y una lista desplegable da la posibilidad al usuario de elegir la fuente con la que quiere formatear el texto, el resultado se puede mostrar inmediatamente con la seguridad de saber que la fuente está disponible.

Ocurre que los gustos e intereses de un grupo de personas lo suficientemente amplio se distribuyen también de esta manera. Esto tiene implicaciones en el comercio electrónico y en nuestros esfuerzos de SEO.

Desde el punto de vista del SEO la larga cola nos interesa por la manera en que la gente hace uso de los buscadores, se sabe que alrededor del 50% del volumen de búsquedas diario son búsquedas únicas, es decir de frases que han sido utilizadas una sóla vez en ese día.

La frecuencia de uso de distintas frases de búsqueda a lo largo de un periodo de tiempo puede representarse gráficamente y el gráfico tendría un aspecto similar a este:

En la parte izquierda del gráfico estarían las frases de búsqueda más populares, conforme avanzamos hacia la derecha vamos encontrando frases cada vez menos utilizadas.

Pero el detalle interesante es que el área coloreada de amarillo puede llegar a igualar o incluso superar en tamaño al área coloreada de verde, esto quiere decir que el conjunto de frases de búsqueda raramente utilizadas puede suponer un volumen equivalente o mayor al volumen de busquedas más populares. Por tanto esta Larga Cola del gráfico supone un enorme potencial de tráfico para nuestro sitio.

¿Cómo de larga es la cola de una determinada palabra de búsqueda?

El fenómeno de la larga cola también se produce entre frases de búsqueda que contienen una determinada palabra: las frases de búsqueda de una sóla palabra se usan muy frecuentemente, las combinaciones de dos palabras son menos frecuentes y frases largas son búscadas en raras ocasiones. Sin embargo estas frases raramente buscadas y otras muchas frases igualmente raras suman hasta llegar a cifras significativas.

Podemos cuantificar, de forma aproximada, cuál es el potencial de la cola de búsquedas menos populares a la hora de atraer tráfico a nuestra web, para ello vamos a utilizar un ejemplo práctico.

En el momento de escribir este artículo, uno de mis sitios web (o para ser más precisos, su página índice) aparece en la quinta posición para la frase de búsqueda “mp3 software“. Es una frase de búsqueda relativamente competitiva, las primeras posiciones están ocupadas por el sitio de winamp o una sección del sitio de descargas de Cnet.

Con una rápida consulta a Google Analytics compruebo que en este sitio el 80% del tráfico que llega después de hacer una búsqueda con las palabras “mp3 software” ha utilizado exactamente esas dos palabras, mientras que el 20% restante ha usado alguna variación que incluye esas dos palabras. Para este cálculo aproximado quedan exluídas las frases de búsqueda en las que han escrito mal alguna de las dos palabras (compruebo perplejo que “mp3 saptwer” no es una frase de búsqueda tan infrecuente), de modo que habrá que tener en cuenta que la cola real es más abultada.

Ahora usando la herramienta de estimación de tráfico de Google Adwords vamos a estimar cuál es el potencial de la cola de busquedas que incluyen las palabras “mp3″ y “software”. Para ello introduzco en la herramienta la frase de tres maneras distintas: primero las dos palabras seguidas tal cual, después las dos palabras entrecomilladas y después las dos palabras entre corchetes. Por último pulso el botón, estos son los resultados obtenidos:

Lo que vemos aquí es que las frases de búsqueda que contienen ambas palabras en cualquier orden suponen 246.000 búsquedas mensuales. Las frases que contienen nuestra sub-frase en el orden indicado suponen 49.500 búsquedas mensuales. Por último las consultas que coinciden exactamente con “mp3 software”, en ese orden y sin palabras extra, suponen únicamente 4.400 búsquedas mensuales.

Interpretando estos resultados se llega a la conclusión de que la frase de búsqueda exacta supone el 1.8% de las búsquedas que incluyen las palabras “mp3″ y “software”, mientras que el 98.2% restante corresponde a variaciones.

Hay que señalar que aunque generalmente la frase exacta estará en la”cabeza” del gráfico, esto es: será una de las frases más populares, no quiere decir que sea la única ni la más popular. En este caso, la frase exacta “mp3 player software” es más popular que la frase exacta de nuestro ejemplo.

A la vista de esta información resulta obvio que centrándome únicamente en mejorar el ranking para “mp3 software” estaría ignorando un tráfico potencial mucho mayor. Así pues hay que valorar qué esfuerzo resultaría más productivo:

• Mejorando posiciones en el ranking, viniendo desde el actual número 5, podría multiplicar el tráfico por 9 en el mejor de los casos.
• Creando contenidos que aparecieran en los rankings para frases de la cola larga podría multiplicar el tráfico hasta por 55.

Ventajas de las frases de búsqueda de cola larga

Crear contenidos relevantes para búsquedas de cola larga tiene la ventaja de que alcanzar buenos rankings es rápido y sencillo si se tiene una web ya establecida y con una buena estructura. Esto es así porque los contenidos muy especializados tienen menos competencia.

Otra ventaja importante es que el tráfico que proviene de búsquedas de cola larga “convierte” mejor en ventas.

Las personas que usan una sóla palabra o una frase de búsqueda muy general, en muchos casos sólo andan buscando información o están curiosesando. Aquellas personas más interesadas, después de una primera búsqueda exploratoria, refinarán su búsqueda con el fin de encontrar algo más específico.

Por ejemplo, cabe esperar que el tráfico proviniente de búsquedas con la frase “mp3 to wma converter software tool” que llega a una página que le ofrece un programa que hace exactamente eso, tenga una mayor predisposición a comprar que el que llega a una página con software multimedia en general después de haber buscado “mp3 software”.

Así pues, normalmente las personas que han usado frases de búsqueda menos vagas se encuentran en un punto más avanzado del proceso de compra o bien saben de forma bastante concreta qué es lo que quieren.