Embeber fuentes en tu sitio web: la guía definitiva

El embebimiento de fuentes utilizando @font-face es verdaderamente un arte oscura y compleja que debe ser dominada.

Es por eso que en esta nota te traemos la guía maestra sobre cómo embeber fuentes en tu sitio web. ¡Esperamos que te sea de utilidad!

Formatos de Fuentes

Hablando de forma general, hoy en día, una fuente de nuestro sistema tendrá uno de estos dos formatos: TrueType (con una extensión de archivo .ttf) u OpenType (con una extensión de archivo.otf). Si bien sería genial tirar una fuente de estas en una web y linkearla, nos enfrentamos a dos problemas mayores:

1) La licencia

2) El soporte del navegador

Licenciación

La concesión de licencias es uno de los mayores obstáculos. Puede ser difícil encontrar una fuente que realmente funciona dentro de la estética general de un diseño. Es la razón por la que hemos tenido que recurrir a la exportación de imágenes sIFR o Cufon.

Incluso muchas fuentes libres tienen limitaciones en cuanto a cómo pueden ser utilizadas, muchas veces requieren instrucciones específicas sobre la vinculación de nuevo a la fuente original, o sólo se permite su uso en sitios no comerciales.

En estos días, una serie de recursos están surgiendo, especialmente los dedicados a la incrustación de fuentes. Un buen comienzo para encontrar la fuente adecuada para nuestro proyecto sería Font Squirrel. Font Squirrel incluso proporciona kits @font-face para hacer que la aplicación en nuestro sitio web sea fácil. Sin embargo, incluso estos kits no dan soporte de navegadores completo.

Soporte de Navegadores

El soporte de navegadores es el mayor problema. El embebimiento de fuentes con una fuente TrueType u OpenType sólo funciona de esta forma en Firefox 3.5, Safari 3.1, y Opera 10. (Lo puedes permitir en tu copia de Chrome 2 utilizando la línea de comando switch.)

Pero lo podemos mejorar todavía más. Podemos lograr que funcione en Internet Explorer 4+, Chrome 0.3+, Opera 9+ e incluso podemos lograr un poco de acción móvil en Safari.

EOT

Internet Explorer soporta un tipo de formato particular llamado Embedded OpenType que proporciona algo de control sobre dónde y cómo se permite embeber la fuente. Necesitarás convertir tu TTF al formato EOT. Microsoft pone a nuestra disposición una herramienta llamada WEFT pero no siempre funciona. Por suerte, hay una herramienta de línea de comando llamada TTF2EOT que puede convertir tu fuente.

Si tienes un archivo OTF, necesitarás convertirlo a TTF antes de pasarlo a EOT. FontForge se puede utilizar para llevar a cabo esto.

Haz clic aquí para ver la captura de pantalla de la conversión de OTF a TTF »

Como verás pronto, tener el archivo en formato TTF nos ayudará en los próximos pasos.

SVG

Con TTF/OTF y EOT, tenemos cubiertos los navegadores decentes pero el toque de gracia es añadir más formatos de fuente a la mezcla: SVG. Las fuentes SVG son soportadas por Chrome 0.3+ sin tener que usar un hack de línea de comando, junto con Opera 9 y iPhone OS 3.1.

Existe una aplicación Java llamada Batik que permite exportar a formato SVG, ésta puede echarse a andar desde la línea de comando, y al hacerla andar deberás especificar el parámetro del ID. La ID es importante a la hora del CSS.

PLAIN TEXT

1. java -jar batik-ttf2svg.jar ./MuseoSans-500.ttf -o museo.svg -id museo

Una de las preocupaciones en la exportación a SVG es el tamaño del archivo. Inmediatamente notamos que la fuente de 29k estaba pasando más de 100k. La principal razón fue el número de elementos hkern que, supongo, se dirigen a kerning. Sin embargo, deberías ser capaz de eliminarlos sin afectar mucho la muestra de tu fuente, pero disminuyendo en gran medida el tamaño del archivo. La otra cosa que notamos fue glyph-name="null" en todos los nodos glyph. Estos se pueden eliminar sin afectar a la visualización de la fuente. Una vez hecho las fuentes SVG serán más pequeñas que la fuente TrueType original que se había convertido.

CSS

Ahora que tenemos nuestros tres archivos-TTF (o OTF), EOT y SVG-es tiempo de comenzar con el CSS.

PLAIN TEXT

1. @font-face {
2. font-family: 'GothicCustom';
3. src: url("LeagueGothic.eot");
4. src: local('League Gothic'),
5. url("LeagueGothic.svg#lg") format('svg'),
6. url("LeagueGothic.otf") format('opentype');
7. }

El nombre de familia fuente que especifiquemos aquí es arbitrario.

La sintaxis SVG posee una cosa particular a notar, y esto es el anchor de ID luego del nombre de fuente. Especifíca la ID que utilizaste cuando realizaste la conversión SVG. De forma alternativa, abre la fuente SVG y asegúrate que el elemento fuente posee un ID.

PLAIN TEXT

1. "lg">

Especificar la familia fuente funciona de forma normal. Sólo especifíca el nombre de fuente que utilizaste en tu declaración @font-face.

PLAIN TEXT

1. font-family: 'GothicCustom', 'Arial Narrow', sans-serif;

Subconjuntos

En la captura de pantalla, dimos una demostración rápida de cómo un subconjuntar fuentes limpiando los glifos que no van a ser utilizados en la fuente final. ¿Por qué quieres subconjuntar una fuente? Hace que el archivo sea más pequeño. Algunos archivos de fuentes fácilmente pesan 200k. Eso es mucho para descargar cuando la gente no lo necesita.

Si optimizas tus imágenes ¿Por qué no hacerlo con tus fuentes?

Bug transformador de texto

Hay una advertencia a tener en cuenta al realizar subconjuntos. Una declaración text-transform: uppercase es todo lo que se necesita.

PLAIN TEXT

1. About
2. div { text-transform:uppercase; }

Esto funciona bien en Firefox y Safari, pero Opera e Internet Explorer ambos parecen hacer decidido el uso de una fuente para un carácter en particular observando el carácter en minúscula en primer lugar. Esto quería decir que estaba usando los caracteres en mayúsculas de una fuente de reserva. Eso es ciertamente menos que ideal.

Por supuesto, siempre puedes cambiar el código fuente HTML para que sea mayúscula, si estabas dispuesto a llegar a la muerte en la eliminación de los glifos.

Imprimir hojas de estilo

Las fuentes personalizadas también funcionan bien con las hojas de estilo de impresión. No era como el uso de técnicas de reemplazo mediante una imagen y luego tener que recurrir a una fuente del navegador aburrido para imprimir. Se siente bien la impresión de una página de nuestro sitio que todavía utiliza las mismas fuentes, como lo que vimos en la pantalla.

Fuente: Tips, Tricks & Bookmarks on Web Development