El contenido de texto siempre ha sido una pieza importante de los sitios web, pero en los primeros días de la Web, los diseñadores y desarrolladores estaban severamente limitados en el control tipográfico que tenían sobre sus páginas web. Esto incluía una limitación en las fuentes que podían utilizar de forma fiable en sus sitios. Es probable que haya escuchado el término «fuentes seguras para la web» mencionado en el pasado. Esto se refería al pequeño conjunto de fuentes que era muy probable que se incluyeran en el ordenador de una persona, lo que significa que si su sitio utilizaba una de esas fuentes, era una apuesta segura que se renderizaría correctamente en el navegador de una persona. Hoy en día, los profesionales de la web tienen una gran cantidad de nuevas fuentes y opciones de tipos con las que trabajar, una de las cuales es el formato WOFF.

¿Qué es WOFF?

WOFF es un acrónimo que significa «Web Open Font Format». Se utiliza para comprimir fuentes para su uso con la propiedad CSS @font-face. Es una forma de incrustar fuentes en páginas web para que pueda utilizar fuentes especializadas más allá de las típicas «Arial, Times New Roman, Georgia», que son algunas de las fuentes seguras para la web mencionadas anteriormente.

WOFF se presentó al W3C como un estándar para el empaquetado de fuentes para páginas web. Se convirtió en un borrador de trabajo el 16 de noviembre de 2010. Hoy en día tenemos WOFF 2.0, que mejora la compresión de la primera versión del formato en casi un 30%. En algunos casos, estos ahorros pueden ser aún más sustanciales!

¿Por qué usar WOFF?

Las fuentes web, incluidas las que se entregan en formato WOFF, ofrecen muchas ventajas sobre otras opciones de fuentes. Por muy útiles que hayan sido esas fuentes seguras para la web, y ciertamente todavía hay un lugar para ellas en nuestro trabajo, es bueno también ampliar nuestras opciones y abrir nuestras opciones tipográficas.

Las fuentes WOFF tienen las siguientes ventajas:

• Son más accesibles que las fuentes como imágenes. Los estilos WOFF son texto HTML plano con CSS, lo que le proporciona una accesibilidad y un control de diseño que las imágenes no permiten.
• Los archivos WOFF incluyen información tipográfica como formas contextuales y figuras de estilo antiguo. Esto le da a sus páginas web una mejor tipografía porque está usando los caracteres correctos, no sólo aproximaciones.
• Las fuentes WOFF pueden ayudar con la internacionalización porque puedes incrustar fuentes con caracteres de otros idiomas.
• Como todo el texto con estilo CSS, las fuentes con estilo WOFF son más amigables con los motores de búsqueda. Los motores de búsqueda no «ven» el texto incrustado en una imagen, y aunque el texto ALT puede ayudar, no hay sustituto para el texto en sí.
• Las fuentes WOFF están comprimidas, por lo que son más pequeñas que otros tipos de archivos de fuentes. Esto ayudará con la velocidad de descarga del sitio y el rendimiento general.
• Puede utilizar archivos WOFF para preservar su identidad de marca incrustando sus fuentes corporativas como archivos WOFF.

Soporte del navegador WOFF

WOFF tiene un excelente soporte para navegadores modernos, incluyendo:

• Cromo 6+
• Firefox 3.6+
• Internet Explorer 9+
• Opera 11.1+
• Safari 5.1+

Hoy en día, es esencialmente compatible con todas las versiones de Opera Mini, con la única excepción de todas las versiones de Opera Mini.

Cómo usar fuentes WOFF

Para usar un archivo WOFF, necesita subir un archivo WOFF a su servidor web, darle un nombre con la propiedad @font-face, y luego llamar a la fuente en su CSS. Por ejemplo:

1. Suba la fuente myWoffFont.woff al directorio /fonts del servidor web.
2. En su archivo CSS agregue una sección @font-face:
   1. @font-face {
   2. familia de fuentes: myWoffFont;
   3. src: formato url(‘/fonts/myWoffFont.woff’) (‘woff’);
3. Añada el nuevo nombre de fuente (myWoffFont) a su pila de fuentes CSS, como lo haría con cualquier otro nombre de fuente:
   1. p {
   2. familia de fuentes: myWoffFont, Geneva, Arial, Helvetica, sans-serif;

Dónde obtener fuentes WOFF

Hay dos grandes lugares donde se pueden encontrar muchas fuentes WOFF que son gratuitas para uso comercial y no comercial:

• Abrir biblioteca de fuentes
• Ardilla de fuente

Si usted tiene una licencia para utilizar una fuente que no está disponible en un formato WOFF, puede utilizar un creador de WOFF como en Font Squirrel para convertir sus archivos de fuente en archivos WOFF. También hay una herramienta de línea de comandos llamada sfnt2woff que puede usar en Macintosh y Windows para convertir sus fuentes TrueType/OpenType a WOFF. Descargue el binario apropiado para su sistema y ejecútelo en la línea de comandos (o Terminal) y siga las instrucciones.

Ejemplo de WOFF

He aquí algunos ejemplos de archivos WOFF: Página WOFF en HTML5 en 24 horas.

Original de Jennifer Krynin. Editado por Jeremy Girard el 7/11/17