Contenido

CSS3 @font-face, una visión general

28 ene

+ 13

Ya hemos hablado otras veces de @font-face, la capacidad de definir nuestras propias fuentes mediante CSS y que los usuarios las descarguen y las visualizen.

Soporte

Aunque suene raro, Internet Explorer lo implementa desde la versión 4.0 (con sutiles diferencias), y los estándares no se ponian de acuerdo en si añadirla o no, ya que en CSS2 entró como una interesante novedad, pero en CSS2.1 fué retirada. Tuvo que llegar CSS3 y hacer que se la tenga en cuenta.

font-face-browser
(Ver Imagen)

Como podemos ver, la mayoría de navegadores la soporta y nos permite usarla con diferentes formatos.

Forma de uso

Veamos como usamos esta propiedad, que pasa por una declaración de nuestra nueva fuente y una posterior aplicación de esta fuente a nuestros elementos.

Declarando nuestra fuente

La declaración permitirá establecer el nombre y la ubicación de nuestra fuente para que el navegador la descargue y la asocie para que la aplicación nos la muestre.

@font-face {
 font-family: miFuente; /* required */
 src: source;                        /* required */
 font-weight: weight;                /* optional */
 font-style: style;                /* optional */
}

Aplicando nuestras fuentes

Una vez declarada la fuente “miFuente“, ya la podemos usar como si de otra fuente se tratara, simplemente estableciéndola con la propiedad CSS font-family.

h3 {
 font-family: miFuente, arial, helvetica, sans-serif;
}

Detectar la propiedad

Si necesitamos detectar si la propiedad está disponible en el navegador del visitante, Paul Irish nos creó una versión compatible con todos los navegadores modernos.

/*!
 * isFontFaceSupported - v0.9 - 12/19/2009
 * http://paulirish.com/2009/font-face-feature-detection/
 *
 * Copyright (c) 2009 Paul Irish
 * MIT license
 */

var isFontFaceSupported = (function(){

    var fontret,
        fontfaceCheckDelay = 100;

		// IE supports EOT and has had EOT support since IE 5.
		// This is a proprietary standard (ATOW) and thus this off-spec,
		// proprietary test for it is acceptable.
    if (!(!/*@cc_on@if(@_jscript_version>=5)!@end@*/0)) fontret = true;

    else {

    // Create variables for dedicated @font-face test
      var doc = document, docElement = doc.documentElement,
          st  = doc.createElement('style'),
          spn = doc.createElement('span'),
          wid, nwid, body = doc.body,
          callback, isCallbackCalled;

      // The following is a font, only containing the - character. Thanks Ethan Dunham.
      st.textContent = "@font-face{font-family:testfont;src:url(data:font/opentype;base64,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)}";
      doc.getElementsByTagName('head')[0].appendChild(st);

      spn.setAttribute('style','font:99px _,serif;position:absolute;visibility:hidden'); 

      if  (!body){
        body = docElement.appendChild(doc.createElement('fontface'));
      } 

      // the data-uri'd font only has the - character
      spn.innerHTML = '-------';
      spn.id        = 'fonttest';

      body.appendChild(spn);
      wid = spn.offsetWidth;

      spn.style.font = '99px testfont,_,serif';

      // needed for the CSSFontFaceRule false positives (ff3, chrome, op9)
      fontret = wid !== spn.offsetWidth;

      var delayedCheck = function(){
        if (isCallbackCalled) return;
        fontret = wid !== spn.offsetWidth;
        callback && (isCallbackCalled = true) && callback(fontret);
      }

      addEventListener('load',delayedCheck,false);
      setTimeout(delayedCheck,fontfaceCheckDelay);
    }

    function ret(){  return fontret || wid !== spn.offsetWidth; };

    // allow for a callback
    ret.ready = function(fn){
      (isCallbackCalled || fontret) ? fn(fontret) : (callback = fn);
    }  

    return ret;
})();

Si solo necesitas comprobarlo sobre Firefox, Safari, Chrome y Opera, te puedes ahorrar todo este código y usar la siguiente comprobación:

if (!!window.CSSFontFaceRule) ...

Alternativas

Mientras los usuarios se adaptan a estas nuevas propiedades siempre es conveniente usar alternativas que ofrezcan un resultado similar. Para conseguir esto, la solución pasa por usar alguna de las que ya hemos visto anteriormente:

  1. sIFR 2.0
  2. cufón
  3. P+C DTR
  4. FLIR
  5. SIIR
  6. DTR
  7. sIFR 3
  8. Typeface.js
  9. IFR
  10. PHP+CSS DTR
  11. CSS Image Replacement [static]
  12. swfir

Más información

  • Bueno, el principal problema de @font-face es windows. No Internet Explorer, windows en sí, y su antaliasing de fuentes. Dependiente de si tienes cleartype activado o no se verán medio decente u horrible. De momento se puede usar para encabezados, pero no para el texto del body.
    Echadle un ojo a este artículo: http://24ways.org/2009/real-fonts-and-rendering

  • Soy de los convencidos de que lo que más puede hace por una web es una acertada selección de la tipografía, su “maquetación” y los colores/tonos empleados en ella (sin entrar en el uso de otras propiedades css3)
    Los problemas de usar una fuente “no-segura” o “segura” por el lado del renderizado son los mismos e independientes de ellas. Eso sí, en algunas serán más acusados que en otras.
    Lo lamentable es, como siempre, la disparidad de formatos implementados por la disparidad de criterios entre navegadores. Pero esto ya es harina de otro costal.
    A. Nieto, sólo hubiese añadido una referencia al generador de Fontsquirrel, para los vagos ;-)
    Un saludo

  • Hola Andrés. Disculpa que no venga al caso precisamente en este post pero ando buscando la forma de cambiar el link por defecto /author/admin en wordpress a otra cosa como p.e. editor/quique o simplemente /quique y no hay forma de encontrar nada al respecto en la web.
    Sabrias indicarme como hacerlo o alguna pagina que trate el tema?

    Muchas gracias

  • Es una lástima que para Windows font-face no sea muy fiable(supongo que ése es el motivo por el que algo tan útil no se utilice). En muchos páginas con buenos diseños veo que se utiliza cufon.

  • Me viene cojonudo el artículo para hacer unas pruebas sobre font-face.
    Esta propiedad será vital y de uso continúo algún día.

  • LA SOLICIÓN ES YA NO DAR SOPORTE CON SCRIPTS EXTRAÑOS A IE6 O A CUALQUIERA QUE NO USE LOS ESTANDARES.

    Yo ya estoy en mi curso intensivo de CSS3 y HTML5.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.