aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hace ya tiempo que mediante Javascript es posible detectar la disponibilidad de una fuente en el navegador del usuario.

(Ver Imagen)

Básicamente la idea es comparar el tamaño de un elemento que contega un texto de una fuente usada como base frente a la que queremos testear. Evidentemente este sistema no es infalible, ya que podemos encontrarnos con diferentes fuentes que tengan el mismo tamaño.

jQuery FontAvailable

Para los que usamos jQuery, tenemos un plugin que implementa una versión sobre esta idea y que nos permite detectar fácilmente de una fuente está o no disponible.

$(document).ready(function() {
 if($.fontAvailable('tahoma')) {
 // código aquí
 }
});

MooTools FontChecker Plugin

David Walsh implementa la versión de MooTools usando la idea de fontAvailable para que los desarrolladores de MooTools tengan esta interesante herramienta.

var fc = new FontChecker();
if (fc.check('Tahoma')) {
 ....
}

¿Cuando usar esta técnica?

Esta técnica es ideal para complementar el trabajo de Cufón, ya que nos permitirá comprobar si la fuente no existe para ejecutar el script.

$(document).ready(function() {
 if(!$.fontAvailable('Optimer')) {
 Cufon.replace('h1');
 }
});

A la espera de la implantación de todos los navegadores de @font-face, estas pequeñas ayudas nos hacen la vida más fácil.