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

TAMBIÉN TE INTERESA

agente-de-smart-working

Así actúan los agentes de smart working, los facilitadores del trabajo híbrido

Cuando las empresas se plantean su tránsito hacia el teletrabajo o el trabajo híbrido, suelen tener una serie de problemas. Como facilitadores de la nueva realidad, los agentes de Smart working se están empezando a erigir como una figura clave en las nuevas formas de trabajar. Hablamos de especialistas que promueven esta cultura, cuyas responsabilidades

redes sociales

Nuevas redes sociales que quieren cambiar el establishment

El ecosistema de las redes sociales está cambiando poco a poco y las reinas del sector pueden ver alterado su estatus quo. Quizás porque la gente esté necesitada de cosas nuevas o porque simplemente la tecnología está abocada a reinventarse continuamente. El caso es que el reinado de Instagram puede empezar a ver el fin

Planner-Trip2Balance

Trip2Balance, la app que presume de crear la Nutrición 2.0

Hoy venimos a hablar de la app Trip2Balance, una de las muchas apps que pronto podremos encontrar en Apple Store y Google Play Store para el cuidado de nuestra salud. En realidad, la aplicación es capaz de cuidarnos desde nuestra alimentación y con pautas para nuestros entrenamientos personales. Hasta aquí, podría decirse que es una

que-es-la-kings-league

¿Qué es la Kings League y por qué está rompiendo moldes?

El mundo de Twitch y las redes sociales han acaparado un evento viral en este inicio de año. Se trata de la ya famosa Kings League que organiza la empresa Kosmos, liderada por el ex futbolista del FC Barcelona, Gerard Piqué.   ¿Qué es la Kings League?   La Kings League es una liga de

riesgos-metaverso

10 riesgos que entraña el metaverso

El metaverso es ya uno de los grandes paradigmas de la convergencia tecnológica, un nuevo mundo donde se integran distintas tecnologías para ofrecer una experiencia completa al usuario. Aún estamos en las primeras fases de su desarrollo, pero ya vemos como las principales compañías tecnológicas están realizando fuertes inversiones en este ámbito. Meta (Facebook), Microsoft,