¿Cuál es la mejor manera de usar fuentes no estándar en línea?

Answer 1

Este es un tema complicado. Aquí están mis notas de la presentación sxsw de Jason Teague sobre el tema. Llamó a 2010 el año de la tipografía web.

Tipografía web: el problema con las imágenes, cufon y sifr

• La tipografía web no es texto en una imagen. SEO mal, búsqueda interna imposible, no se puede seleccionar copiar / pegar, difícil de cambiar
• La tipografía web no es texto en Flash. En un nivel básico, está cargando una aplicación separada en su navegador web. Claro, ahora es seleccionable y es más fácil de buscar de lo que solía ser, pero todavía no es sostenible para usarlo como texto corporal, por ejemplo.
• Web Typography es fuentes con HTML y CSS

Nota editorial: en mi experiencia personal, Cufon y Sifr funcionarán bastante bien para los títulos, con moderación. Sin embargo, no los use para el texto del cuerpo, y no los use si está implementando un diseño de un exigente director de arte, con cufon y sifr nunca obtendrá el liderazgo, etc.

2010: el año de la tipografía web
Presentador: Jason Teague. Autor: Fluid Web Typography. Gerente de Diseño Sr. en Merriot International

Varias cosas clave ocurrieron en los últimos años para permitirnos comenzar a usar fuentes reales en la web.

La tipografía web está a punto de cambiar
Todo lo que sabes sobre las fuentes web va a cambiar este año:
o http://sxsw.beercamp.com/
o http://www.workatplay.com/  desplácese debajo de la imagen principal

Ambos sitios usan una verdadera tipografía web. Sin imágenes, sin flash, fuentes increíbles.

Historia
Hasta hace poco, había cinco fuentes seguras para la web que podía estar absolutamente seguro de que todos tenían: Arial, Georgia, Times, Verdana, Comic Sans. No podía estar seguro de ninguno de los otros. La solución siempre ha sido una forma de tener un enlace de página web a un archivo de fuente y hacer que el navegador descargue esa fuente sobre la marcha y la use para representar el texto. Esto ha sido técnicamente posible desde 2008, Safari incorporó el soporte para la etiqueta @ font-face en CSS. Funciona así:

@Perfil delantero {
Familia tipográfica: “Robson Celtic”;
src: url (“http: //site/fonts/rob-celt.ttf”)
}

cuerpo {
Familia tipográfica: “Robson Celtic”, Arial, sans-serif;
}

El navegador descarga la fuente de tipo verdadero y la usa para el texto en la etiqueta . Sin embargo, la mayoría de las fundiciones de fuentes se negaron a licenciar las fuentes para su uso de esta manera, porque cualquiera podría simplemente apuntar su navegador a http: //site/fonts/rob-celt.ttf y descargar una fuente gratuita para usar en su máquina. No hubo DRM. Entonces la etiqueta @ font-face nunca ganó popularidad. Opera y Firefox no agregaron soporte para fuentes de tipo verdadero hasta 2009.

Firefox 3.6 y WOFF
Firefox 3.6 introdujo soporte para un nuevo formato de fuente en la directiva # font-face: WOFF
• WOFF significa Web Open File Format
• WOFF admite metadatos en las fuentes con información sobre los derechos de uso. Woff no tiene DRM, pero si incluye una fuente WOFF, funcionará en su sitio, pero el usuario no podrá arrastrarla a su carpeta de fuentes y usarla en su PC. Ningún sistema operativo admite el formato. Las fundiciones podrán controlar fácilmente el uso de Woff rastreando los metadatos de su fundición.

¿Pero qué hay de Internet Explorer?
Sorprendentemente, IE ha admitido fuentes web incrustables descargables desde IE 2. El formato que admiten se denominó EOT – Embedded Open Type. Esta era una fuente cargada de DRM, donde la fundición tenía que enviar versiones especiales firmadas para cada nombre de dominio en el que se permitía su uso. Nunca se dio cuenta. Sin embargo, recientemente Microsoft descubrió que las fuentes podían estar empaquetadas en EOT, legibles por versión de IE a partir de 5, que no tenían el nombre de dominio DRM en ellas. Entonces, sí, IE admite fuentes web, pero no en el formato WOFF, sino en el formato EOT. A menudo llamado “EOT Lite” cuando se elimina el DRM basado en el dominio.

¡Qué asco! Todos estos formatos diferentes
La buena noticia es que puede incluir la misma fuente en varias versiones en su CSS, y el navegador elegirá la que sea compatible. Aquí está la matriz:

¿Qué navegadores admiten qué formato de fuente?
EOT Lite WOFF OpenType TrueType
IE 5+ Y
FireFox 3.6 YY Y
Opera / Safari / Chrome S S
Desafortunadamente, en este punto debe incluir 4 versiones de la fuente en su marcado para que la fuente se muestre en todos los navegadores. El CSS se ve así:

@Perfil delantero {
font-family: ‘BaghdadRegular’;
src: url (‘Bagdad.eot’);
src: formato local (‘☺’), url (‘Baghdad.woff’) (‘woff’), formato url (‘Baghdad.otf’) (‘opentype’);
}

El smiley es un truco para asegurarse de que no use accidentalmente una fuente local en la computadora de un usuario, lo que anularía la fuente descargada. Puede ver los detalles de los diversos métodos “a prueba de balas” para incrustar fuentes en los navegadores aquí: http://paulirish.com/2009/bullet…

Una herramienta crítica:
http://www.fontsquirrel.com/font…

Esta herramienta le permite cargar cualquier fuente de tipo verdadero, y genera para usted no solo las versiones EOT, WOFF y OpenType que necesita para incrustarlas en su sitio, sino que generará el CSS necesario para hacerlo. Bastante ingenioso!

EL GRAN PROBLEMA: TODAVÍA, LICENCIA
Le pregunté a Jason, que estaba lleno de entusiasmo: dado que Safari, Opera y Chrome no son compatibles con WOFF o EOT Lite, ¿hay alguna forma de usar versiones “seguras” de fuentes que las fundiciones de tipos estarían dispuestas a licenciar con esos navegadores? La respuesta: aún no. Fui al stand de Opera más tarde ese día y me dijeron que planeaban lanzar el soporte de WOFF “pronto”. Entonces, por ahora, si quieres soportar Opera / Safari y Chrome, estás limitado a las fuentes que se han distribuido con Una licencia pública.

Fundiciones de fuentes que ofrecen fuentes web en sus licencias:
• http://www.exljbris.com/ (¡algunos gratis!)
• http://www.emigre.com/
• http://www.fontfont.com/
• http://www.linotype.com/
• http://www.chank.com/

Colecciones de WebFonts gratis (¡úselas en sus sitios ahora!)
• http://www.fontsquirrel.com/
• http: //www.theleagueofmoveablety…

Oficinas de fuentes en línea
Un desarrollo muy importante este año ha sido el lanzamiento de tres sitios web similares:
• http://www.typekit.com/ (Mucha atención en sxsw)
• http://www.kernest.com/
• http://www.fontdeck.com/

Estos sitios alojarán fuentes web en su nombre. Tienen grandes bibliotecas y se han encargado de todas las licencias con las fundiciones y cobran una tarifa mensual simple basada en el ancho de banda. La desventaja de estos sitios es que si alguna vez caen, su sitio se bloqueará mientras espera que se cargue la fuente.

Estas fundiciones están optando por lanzar su propio servicio de “oficina de fuentes en línea” en lugar de ir con un tercero:
• http://www.typotheque.com/
• http://www.ascenderfonts.com/

La línea de fondo

Es técnicamente posible utilizar las fuentes arbitrarias en la web ahora de una manera muy real. Simplemente cargue su fuente en el generador de fuentes enlazado anteriormente, obtenga las diversas versiones, use el CSS generado y estará en camino.

Rara vez es legal usar fuentes arbitrarias en la web. La mayoría de las fundiciones aún no tienen disposiciones que permitan ese uso.

Hay cuatro formas de usar legalmente webfonts :
o Use uno gratis
o Negociar con una fundición de fuentes
o Use una fundición de tipos que la explicidad permita el uso de la fuente web
o Use uno en las fuentes prenegociadas para uso en línea por typekit y kernest, sirva sus fuentes desde sus servidores