Base de conocimientos sobre fuentes WOFF | Aspose.Font

Introducción a la fuente WOFF

Web Open Font Format (WOFF) es un formato de archivo de fuente diseñado para su uso específicamente en la web. Fue desarrollado para superar algunas de las limitaciones y desafíos de los formatos de fuentes tradicionales, como TrueType y OpenType, en el desarrollo web.

El formato WOFF le proporciona:

Optimización web.
Compatibilidad entre navegadores.
Información de licencia y derechos de autor incluida directamente en el archivo de fuente.
Tipografía mejorada que incluye características como ligaduras, interletraje y alternativas estilísticas.
Accesibilidad web.

Para utilizar fuentes WOFF en el desarrollo web, normalmente las incluye en los archivos HTML y CSS de su proyecto utilizando la regla @font-face.

Ventajas y desventajas de la fuente WOFF

La siguiente tabla muestra los pros y los contras de las fuentes WOFF, para que puedas decidir si usarlas en tu proyecto o no.

Pros	Contras
Las fuentes WOFF están comprimidas, lo que hace que su tamaño de archivo sea menor en comparación con otros formatos de fuentes. Esto da como resultado tiempos de carga más rápidos para las páginas web.	Es posible que los navegadores más antiguos no admitan completamente este formato. Esto puede ser un problema si necesita compatibilidad con sistemas heredados.
Ampliamente compatible con los principales navegadores web, lo que brinda una representación de fuentes consistente en diferentes plataformas y navegadores.	Algunas fuentes comerciales de alta calidad pueden requerir la compra de licencias para usarlas en la web con el formato WOFF.
Las fuentes WOFF permiten a los creadores de fuentes incorporar información de licencias y derechos de autor dentro del propio archivo de fuente.	Las fuentes WOFF pueden reproducirse de manera diferente en diferentes dispositivos o navegadores debido a los distintos motores de representación de fuentes.
Admite funciones tipográficas avanzadas, como ligaduras, interletraje y alternativas estilísticas.	Las técnicas adecuadas de optimización de fuentes son esenciales para mantener el tamaño de los archivos bajo control.
Puede mejorar la accesibilidad web al proporcionar un mejor control sobre la representación de las fuentes, el espaciado y la altura de las líneas.
Las fuentes WOFF se pueden alojar en el mismo dominio que la página web, lo que reduce el riesgo de vulnerabilidades de seguridad asociadas con solicitudes de fuentes de origen cruzado.

Detalles técnicos de las fuentes WOFF

Web Open Font Format está diseñado específicamente para uso web. Aquí hay algunos detalles técnicos clave al respecto:

Las fuentes WOFF utilizan técnicas de compresión para reducir el tamaño del archivo en comparación con los archivos de fuentes TrueType u OpenType sin formato.
Incluyen metadatos que proporcionan información sobre la fuente, incluido su nombre, derechos de autor y detalles de licencia. Se puede acceder a él mediante programación, lo que simplifica el cumplimiento de las licencias de fuentes.
Las fuentes WOFF contienen los datos de fuente necesarios para representar texto, incluidas formas de glifos, métricas y otra información relacionada con las fuentes. Estos datos están codificados en un formato que los navegadores web pueden interpretar.
Puede incluir información de sugerencias que se utiliza para mejorar la legibilidad de fuentes en tamaños pequeños ajustando la posición de glifos individuales y controlando el suavizado.
Pueden ser subconjuntos, lo que significa que solo una parte de los glifos de la fuente se incluye en el archivo.
Las fuentes WOFF generalmente se entregan con un tipo MIME font/woff o font/woff2 cuando se solicita desde un servidor web. El tipo MIME ayuda a los navegadores a comprender cómo manejar el archivo de fuente.
Al utilizar fuentes WOFF en una página web, los desarrolladores web suelen definir una pila de fuentes alternativa en CSS para asegurarse de que, si la fuente WOFF especificada no está disponible o no se carga, el navegador utilice un sistema predeterminado u otro especificado.
Si las fuentes WOFF están alojadas en un dominio diferente al de la página web, los encabezados CORS deben configurarse en el servidor de fuentes para permitir que los navegadores web accedan a los archivos de fuentes de forma segura. Esto ayuda a prevenir ataques de falsificación de solicitudes entre sitios (CSRF).
Además del formato WOFF original, existe un formato más nuevo llamado WOFF2 que ofrece una compresión aún mejor y tamaños de archivo más pequeños que WOFF, pero es posible que no sea compatible con todos los navegadores más antiguos.
Las fuentes WOFF pueden incluir una amplia gama de caracteres Unicode, por lo que pueden mostrar texto en varios idiomas y escrituras.

¿Cómo representan los glifos las fuentes WOFF?

Las fuentes Web Open Font Format representan glifos de manera similar a otros formatos de fuente. Cuando un navegador web o un motor de representación encuentra contenido de texto en una página web que requiere una fuente específica, sigue estos pasos para representar los glifos:

Cuando se carga una página web y especifica el uso de una fuente particular a través de CSS (por ejemplo, familia de fuentes), el navegador verifica si tiene la fuente requerida en su caché. De lo contrario, inicia una solicitud al servidor web que aloja el archivo de fuente.
Si la fuente no está, el navegador envía una solicitud al servidor para obtener el archivo de fuente WOFF asociado con la familia de fuentes especificada.
Después de recibir el archivo de fuente, el navegador analiza los datos de la fuente WOFF, extrayendo información sobre formas de glifos, métricas, mapeo de caracteres (mapeo Unicode), etc.
Cuando se representa texto en la página web, el navegador asigna cada carácter del texto al glifo correspondiente en la fuente según Unicode o información de codificación.
El navegador utiliza la información del glifo para representar los caracteres individuales en la página web. Esto incluye determinar el tamaño, la posición y el espaciado de cada glifo en relación con otros glifos del texto.
Para mejorar la calidad visual del texto y suavizar los bordes de los caracteres, el navegador puede aplicar técnicas de suavizado a las formas de los glifos.
Si hay información de interletraje y ligadura, el navegador puede ajustar el espacio entre caracteres y reemplazar combinaciones de caracteres específicos con ligaduras.
Si la fuente no está disponible o no se carga, el navegador utiliza una fuente predeterminada del sistema u otra especificada en la pila de fuentes CSS.
Finalmente, el navegador muestra el texto renderizado en la página web, utilizando los glifos generados a partir de la fuente WOFF.

¿WOFF de WOFF2?

	WOFF	WOFF2
Compresión	Utiliza un método de compresión basado en la compresión zlib	Utiliza un algoritmo de compresión más avanzado y eficiente llamado Brotli. Esta compresión es muy eficiente y, a menudo, da como resultado archivos de fuentes que son entre un 30 y un 50 % más pequeños que sus equivalentes WOFF.
Compatibilidad con navegadores	Tiene buena compatibilidad con los navegadores web modernos; los navegadores más antiguos pueden tener compatibilidad limitada o nula con este formato.	Tiene una compatibilidad más amplia entre los navegadores modernos.
Tamaño de archivo	Están comprimidos y son más pequeños que los formatos de fuente sin procesar, pero sus tamaños de archivo aún pueden ser relativamente grandes.	Por lo general, son mucho más pequeños que WOFF y los formatos de fuente sin procesar originales.
Rendimiento	Ofrecen un mejor rendimiento en comparación con los formatos de fuentes sin formato debido a su tamaño de archivo reducido y entrega optimizada.	Proporcionan un rendimiento web superior al reducir significativamente el tiempo que lleva descargar archivos de fuentes.

¿Cómo crear una fuente WOFF?

La creación de una fuente Web Open Font Format (WOFF) implica la conversión de otros formatos de fuente al formato WOFF. Estos son los pasos del proceso:

Obtenga una fuente TTF u OTF. Puede crear su propia fuente utilizando un software de diseño de fuentes o utilizar una fuente existente para la que tenga los derechos de licencia adecuados.
Asegúrese de que su archivo de fuente esté bien diseñado y libre de errores.
Convertir a WOFF.
Antes de usar la fuente WOFF en su sitio web, pruebe la fuente y resuelva los problemas si encuentra alguno.
Aloje el archivo de fuente WOFF en su servidor web o en una red de entrega de contenido (CDN) para que su sitio web pueda acceder a él. Asegúrese de configurar el tipo MIME apropiado para los archivos WOFF, que normalmente es font/woff.
Use la fuente WOFF en CSS con la regla @font-face que define la fuente WOFF y especifica su fuente usando la propiedad src. He aquí un ejemplo:

1    @font-face { 
2        font-family: 'YourFontName'; 
3        src: url('path/to/your-font.woff') format('woff'); 
4    }

Aplique la fuente a elementos HTML específicos usando la propiedad font-family en su CSS.

1    body { 
2        font-family: 'YourFontName', sans-serif; 
3    }

Asegúrese de tener los derechos de licencia adecuados para la fuente que está utilizando en su sitio web, especialmente si es una fuente comercial.

¿Cómo optimizar archivos WOFF?

La optimización de las fuentes WOFF (Web Open Font Format) es esencial para mejorar el rendimiento web al reducir el tamaño del archivo de fuente y mantener la tipografía de alta calidad. Estas son las formas en que puede hacerlo:

Subconfigurar la fuente garantiza que solo incluya los caracteres necesarios para su sitio web. Esto no sólo reducirá el tamaño del archivo sino que también le ayudará a administrarlo más fácilmente.
Descubra si realmente necesita información de sugerencias e interletraje en su fuente, ya que esto aumenta el tamaño del archivo. Algunas fuentes pueden funcionar bien sin sugerencias ni interletraje, especialmente en tamaños más grandes.
Optimice los glifos revisando sus contornos y eliminando puntos o curvas innecesarios mientras mantiene la calidad visual. El software de edición de fuentes puede ayudar con esta optimización.
Comprima sus archivos de fuentes WOFF usando herramientas como gzip o Brotli en su servidor web para reducir el tamaño del archivo al enviar fuentes al navegador.
Implemente encabezados de almacenamiento en caché adecuados en su servidor web para garantizar que el navegador almacene en caché las fuentes y evitar la descarga innecesaria de fuentes en visitas posteriores a su sitio web.
Utilice una red de entrega de contenido (CDN) que a menudo tenga mecanismos de entrega y almacenamiento en caché optimizados que puedan mejorar los tiempos de carga de fuentes.
Intente utilizar el atributo de precarga en su HTML para cargar fuentes críticas al principio del proceso de carga de la página para reducir los retrasos en el bloqueo de renderizado relacionados con las fuentes.
Utilice la propiedad CSS font-display para controlar cómo se muestran las fuentes al cargar.
Utilice técnicas de tipografía adaptable para cargar diferentes variantes de fuente según el tamaño y la resolución de la pantalla. Tenga consultas de medios para cargar diferentes archivos de fuentes para diferentes dispositivos y tamaños de pantalla.
Limite el número de fuentes que utiliza en su sitio porque cada fuente adicional aumenta el tamaño total del archivo.
Evite aplicar personalizaciones excesivas de fuentes (por ejemplo, múltiples pesos y estilos de fuente) si no son esenciales para su diseño.
Pruebe periódicamente el rendimiento de su sitio web utilizando herramientas como Google PageSpeed Insights o GTmetrix para identificar problemas de rendimiento relacionados con las fuentes.

Estándares y especificaciones del W3C (World Wide Web Consortium) en relación con las fuentes WOFF.

El W3C es responsable de desarrollar y mantener diversos estándares y especificaciones relacionados con las tecnologías web, incluidas las fuentes. Un estándar importante relacionado con las fuentes en la web es el formato de fuente abierto web (WOFF). WOFF es un formato de fuente diseñado específicamente para su uso en la web y proporciona una forma de empaquetar fuentes para una entrega y uso eficientes en páginas web. Aquí hay algunos puntos clave del W3C:

WOFF 1.0 (Formato de fuente abierta web 1.0):

El formato WOFF original introducido por el W3C.
Proporciona una forma de empaquetar datos de fuentes para su uso en la web, optimizando el tamaño del archivo y los tiempos de carga.
Admite datos de fuentes TrueType y OpenType.
Publicado como Recomendación del W3C el 3 de diciembre de 2012.

WOFF 2.0 (Formato de fuente abierta web 2.0):

Una versión actualizada del formato WOFF con compresión mejorada y otras mejoras.
Ofrece mejores índices de compresión que WOFF 1.0, lo que da como resultado archivos de menor tamaño.
También admite datos de fuentes TrueType y OpenType.
Publicado como Recomendación del W3C el 18 de agosto de 2016.

Formato de archivo WOFF (borrador de trabajo):

El trabajo en curso del W3C para especificar los detalles técnicos del formato de archivo WOFF.
Proporciona información sobre la estructura de los archivos WOFF, incluidos metadatos y datos de fuentes.
Ayuda a los implementadores y desarrolladores a comprender cómo crear y utilizar fuentes WOFF de forma eficaz.

Grupo de trabajo de fuentes web:

Web Fonts Working Group es responsable de desarrollar y mantener estándares relacionados con las fuentes web, incluido WOFF.
El trabajo del grupo incluye abordar problemas de carga y representación de fuentes, optimizar la entrega de fuentes y mejorar la seguridad de las fuentes en la web.

Módulo de fuentes CSS Nivel 3:

Esta especificación CSS define cómo se hace referencia a las fuentes y se utilizan en las hojas de estilo CSS.
Proporciona la regla @font-face, que permite a los desarrolladores web especificar fuentes personalizadas para los elementos de la página web, incluido el uso de fuentes WOFF.

Conclusión

El desarrollo y uso de fuentes Web Open Font Format (WOFF) han mejorado significativamente el proceso de tipografía web. Este formato de fuente versátil ha permitido a los diseñadores y desarrolladores web ofrecer experiencias tipográficas más creativas y accesibles a los usuarios de Internet.

WOFF ofrece una variedad de beneficios, incluida una compresión eficiente para tiempos de carga de páginas más rápidos, compatibilidad mejorada entre navegadores y la capacidad de incluir tipos de letra personalizados sin perder el rendimiento del sitio web. Se han convertido en una parte integral del diseño web y siguen siendo muy populares y respaldados.

Fuentes tipo 1 Fuentes CFF