¿Qué es exactamente una fuente web y qué implica la conversión a una?

He leído algunos artículos sobre esto, pero las diferencias técnicas reales entre las fuentes web y las fuentes de escritorio todavía me eluden. Cuanto más leo sobre el tema, más me da la sensación de que nadie tiene una definición técnica clara de qué es exactamente una fuente web.

Cuando subo una fuente de "escritorio" a un servicio generador de fuentes web como FontSquirrel, ¿qué hacen exactamente esos servicios al archivo de fuente para convertirlo en una fuente web? Si el uso principal de estos servicios es la conversión a diferentes formatos, ¿qué formatos se necesitan realmente en la web moderna para admitir un número razonable de navegadores a partir de 2019?

Una "fuente web" es solo una fuente utilizada en la web o en el navegador. Lo que hacen estos generadores de fuentes web es facilitarle la vida al brindarle el CSS necesario para servir la fuente a sus visitantes y convertir su fuente a todos los formatos de archivo que necesita para asegurarse de que la fuente funcione en el navegador.

Algunas fuentes se consideran "seguras para la web" simplemente por ser tan comunes que todas las computadoras las tienen, como "Arial". No necesita hacer nada más que decirle al sitio web que use esa fuente. Las fuentes web deben ser descargadas por el navegador del visitante porque si una fuente no está en su computadora, no la verá.

Los formatos de fuente desarrollados específicamente para la web, como Woff, están diseñados con un tamaño de archivo pequeño en mente. Las fuentes de Google también le ofrecen diferentes formatos de esta manera, está un poco oculto.

Es bastante importante tener en cuenta que algunas fuentes pueden tener una licencia de fuente web separada, que puede que no tenga incluso si posee los archivos de fuente. Al igual que las imágenes de Google ... El hecho de que haya podido descargar la imagen no significa que pueda usarla para vender el aftershave de su empresa.

Developers.google.com tiene una buena publicación que se centra en la optimización de fuentes web, pero también tiene algo sobre lo básico.

Hay un extracto bastante bueno sobre los diferentes formatos en ese artículo:

Hoy existen cuatro formatos de contenedor de fuentes en uso en la web: EOT, TTF, WOFF y WOFF2. Desafortunadamente, a pesar de la amplia gama de opciones, no hay un único formato universal que funcione en todos los navegadores antiguos y nuevos: EOT es solo IE, TTF tiene soporte parcial para IE, WOFF disfruta del soporte más amplio pero no está disponible en algunos navegadores antiguos , y la compatibilidad con WOFF 2.0 es un trabajo en progreso para muchos navegadores.

¿Entonces, dónde nos deja eso? No hay un solo formato que funcione en todos los navegadores, lo que significa que necesitamos entregar múltiples formatos para proporcionar una experiencia consistente

Transfonter también tiene una tabla bastante buena sobre el soporte del navegador:

Hice una investigación más detallada después de hacer esta pregunta, por lo que agrego esta respuesta como una especie de apéndice a Joonas ', lo cual fue bueno pero no respondió mi última pregunta con suficiente detalle para mí:

Si el uso principal de estos servicios es la conversión a diferentes formatos, ¿qué formatos se necesitan realmente en la web moderna para admitir un número razonable de navegadores a partir de 2019?

Muchos desarrolladores sostienen que WOFF y WOFF2 son los únicos formatos de fuente necesarios en el desarrollo web moderno . Sin embargo, esas respuestas no tienen un buen origen, y también creo que están siendo un poco entusiastas, así que comencemos mirando las cifras de soporte reales para WOFF y WOFF2, cortesía de CanIUse.com, que es el estándar de la industria para documentar esto. tipo de cosa.

Soporte para WOFF2

WOFF2 mejora a WOFF en todos los sentidos, es compatible con la mayoría de los navegadores de escritorio lanzados después de 2014, pero solo desde 2018 comenzó a ser compatible con la mayoría de los navegadores móviles. Es compatible con aproximadamente el 93% de los navegadores a nivel mundial.

Apoyo a WOFF

WOFF comenzó a ser soportado por Internet Explorer en IE9 (publicado en 2011), lo que hace que el formato EOT obsoleto para las versiones de IE publicado desde 2011. Es apoyado por un estimado de 97% de los navegadores a nivel mundial.

Otros navegadores de escritorio comenzaron a admitir WOFF aproximadamente al mismo tiempo, incluidos Firefox desde Firefox 3.6, Chrome desde Chrome 5 y Safari desde 5.1 (lanzado en 2010, 2011 y 2011 respectivamente), lo que hace que los formatos TTF y OTF ^{1 sean} obsoletos en versiones anteriores . La mayoría de los navegadores móviles son compatibles con WOFF desde 2013.

Advertencia y conclusiones

Desde este punto de vista, es bastante fácil descartar todos los demás formatos como innecesarios, pero el software que ya no se admite oficialmente nunca ha sido un buen indicador de que ya no se utiliza. En otras palabras, no se garantiza que el uso compartido de la versión global del navegador sea representativo de los datos demográficos que utilizará su sitio web.

El uso compartido de la versión del navegador puede variar drásticamente entre los grupos demográficos: factores como el país, la clase social y los ingresos influyen en gran medida en los dispositivos (y, por lo tanto, las versiones de los navegadores) que utilizan sus usuarios. Como desarrollador, piense si el sitio que está construyendo será utilizado por los datos demográficos que tienen más probabilidades de utilizar esas versiones anteriores.

Si decide que ese es el caso, y necesita admitir navegadores de escritorio anteriores a 2011 o navegadores móviles anteriores a 2013, use la pila de fuentes completa: WOFF2, WOFF, TTF (u OTF) y EOT.

Si no necesita admitir esos navegadores antiguos, y sigue siendo cierto que lo más probable es que no lo haga, simplemente use WOFF2 y WOFF como pila de fuentes a partir de aquí.

_{(1) TTF y OTF son formatos de fuente de escritorio tradicionales, y cualquier navegador que admita uno admite el otro, así que nunca use ambos}

No mucho.

WOFF no es más que un formato comprimido para TTF, lo que resulta en un tamaño más pequeño. Las partes internas no cambian. WOFF2 va un poco más allá, modifica ligeramente la representación de la fuente para obtener un poco más de compresión. EOT, al ser un formato solo para MS, no cuenta en absoluto. SVG es prácticamente solo contornos, apenas más, por lo que no cuenta como una fuente real, solo úsala para iconos, si es que lo hace.

Solo usa WOFF y listo. Si desea exprimir el último byte, es posible que también desee ofrecer WOFF2, pero la diferencia será insignificante.

Sin embargo, me gustaría enfatizar algo realmente básico: una "fuente", detalles de implementación técnica aparte, es una fuente que ha sido autorizada por su creador o titular de derechos para la tarea específica de usar en un sitio web. Y esos vendrán en formato webfont. Si está sentado frente a un generador para convertir una fuente a un formato de fuente web y no es de código abierto o uno que usted mismo dibujó, ¡deténgase allí! Es casi seguro que está rompiendo la licencia y podría ser demandado. Y dado que está en la web, es fácil para las personas encontrar lo que estás haciendo y comparar su lista de ventas.

Vea, por ejemplo, este tonto , que ha trabajado para Facebook y Google, que no se dio cuenta hasta que alguien le dijo que técnicamente estaba usando una fuente pirateada en su sitio web. Tenía una licencia de suscripción de escritorio, pero esa no es una licencia para uso web.