Uso de fuentes personalizadas en páginas web con el formato WOFF

Uso de fuentes personalizadas en páginas web con el formato WOFF

Uso de fuentes personalizadas en páginas web con el formato WOFF

VALORACIÓN DEL ARTÍCULO:
5/5


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

Deja un comentario

TAMBIÉN TE INTERESA

skyshowtime

Una nueva plataforma de streaming se presenta en Europa: llega SkyShowtime

Llega a Europa SkyShowtime para sumarse a la importante oferta que tienen los consumidores en sus televisiones inteligentes. Netflix, Prime Video, HBO Max, Disney+, Dazon… y ahora este nuevo servicio de streaming que se ha presentado recientemente en Europa.   Por el momento llegará primero a los países nórdicos. SkyShowtime se estrena en Dinamarca, Finlandia,

desaparece-el-notch-del-iphone-14-pro

El precio del iPhone 14, motivo clave en la caída de su demanda

Estamos en un momento de inflación disparada y la situación económica de alza de precios está mermando la capacidad de consumo de las familias. Se nota en todo, en el ocio, la cesta de la compra y también la adquisición de tecnología. Además nos encontramos a escasos meses de picos de consumo como el Black

veentajas-del-marketplace

Ventajas de los marketplaces en plena escalada de precios

Si vendes productos por la web, deberías apostar por los marketplaces, aún en un momento de inflación alta, en plena escalada de precios. La economía se encuentra en un momento difícil: agosto cerró con una tasa de inflación superior a los dos dígitos (10,4%) por tercer mes consecutivo. La incertidumbre ante el invierno impulsa a

OPPO-Reno8-5G

Ya a la venta los nuevos teléfonos OPPO Reno8

OPPO Reno8 es una realidad ya en Europa. La marca hizo una presentación en París para dar a conocer los nuevos productos que llegan directamente al mercado para sumar una feroz competencia. Y es que en pocos años en el mercado del viejo continente, OPPO se ha hecho un hueco importante en el consumidor.  

batería-portátil-DELTA-2

Esta batería portátil es top y acaba de salir a la venta

Tener una batería portátil puede darnos mucha versatilidad para nuestras actividades tanto dentro como fuera de casa. Usamos muchos dispositivos a diario y todos ellos requiere de energía eléctrica para trabajar, por lo que una herramienta que nos aporte dicha energía puede venirnos muy bien en caso de apagones o proyectos en el exterior. EcoFlow,