Introducción
La función @font-face de CSS3 nos permite usar tipos de letra personalizados en la Web de forma accesible, manipulable y escalable. Pero podrías decir: "¿Por qué usáramos @font-face si tenemos Cufon, sIFR y texto en imágenes?". Estos son algunos beneficios de usar @font-face para las fuentes personalizadas:
- Capacidad de búsqueda completa por búsqueda (
ctrl-F) - Accesibilidad a tecnologías de asistencia, como lectores de pantalla
- El texto se puede traducir a través de servicios de traducción o traducción en el navegador.
- CSS tiene la capacidad total de ajustar la visualización tipográfica:
line-height,letter-spacing,text-shadow,text-aligny selectores como::first-lettery::first-line.
@font-face en esencia
En su forma más básica, declaramos una nueva fuente remota personalizada para su uso de la siguiente manera:
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
Luego, ponlo en uso:
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
En esta declaración @font-face, usamos la propiedad font-family para nombrar explícitamente la fuente. Puede ser de cualquier manera, sin importar el nombre real de la fuente; font-family: 'SuperDuperComicSans'; funcionaría bien, aunque quizás no sea para tu reputación. En la propiedad src, apuntamos al lugar donde el navegador puede encontrar el recurso de fuente. Según el navegador, algunos tipos de fuentes válidos son eot, ttf, otf, svg o un URI de datos que incorpora todos los datos de fuente intercalados.
| otf y ttf | svg | woff | EOT | |
|---|---|---|---|---|
| IE | IE9 | IE9 | Internet Explorer 5 y versiones posteriores | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | Chrome 4 | Chrome 0.3 | Chrome 5 | |
| Safari | 3.1 | 3.1 | ||
| Ópera | Opera 10.00 | Ópera 9 | ||
| iOS | iOS 1 | |||
| Android | 2.2 |
Por supuesto, nada es tan simple como debería ser. La limitación inicial del código anterior era que no mostraba un EOT para IE 6-8. La sintaxis de @font-face a prueba de balas propuso una forma de resolver esto; luego, sigue una versión sólida.
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
¿Ya sientes dolor de cabeza? Si prefieres empezar rápidamente, ve al generador de Font Squirrel, una herramienta que simplifica todo el proceso, ya que toma tu fuente y prepara sus variantes y CSS. Es indispensable para poner en práctica las fuentes para sitios web hoy en día.
¿Compatibilidad con dispositivos móviles?
Mobile Safari admite fuentes web SVG a partir de iOS 3.1 y Android admite otf/ttf a partir de la versión 2.2. Pero ¿los usuarios de dispositivos móviles deberían disfrutar de esta experiencia tipográfica mejorada? Recomendaría que no. El motivo predominante es la manera en que WebKit maneja el texto que espera una fuente personalizada a través de @font-face: el texto es invisible. Por lo tanto, con una conexión móvil de bajo ancho de banda, los usuarios no verán ningún texto hasta que se hayan cargado ~50,000 de datos de fuente. El equipo de Webkit está buscando una solución para activar una fuente de resguardo después de que hayan vencido unos pocos segundos, pero hasta que eso haya llegado, no sería justo que someter a tus usuarios a tales obstáculos entre ellos y tu contenido.
Servicios de fuentes para sitios web
Varios servicios incluyen la función @font-face en una API sencilla, que a menudo te permiten agregar una sola línea de CSS o de secuencia de comandos a tu HTML y algunos parámetros de configuración, y eso es todo. Muchos productos como WebInk, Typekit y Fontslive te permiten usar las fuentes (a veces, hasta un límite de ancho de banda) por una tarifa mensual. El uso de estos servicios es muy conveniente para los desarrolladores casuales, ya que entrega algunas de las complicaciones de entregar una solución entre navegadores.
La API de Google Font te permite usar un conjunto pequeño y seleccionado de fuentes con licencia libre. Simplemente se vincula a una hoja de estilo y permite que Google se encargue de los problemas de rendimiento y en varios navegadores. Es la forma más rápida de ponerse en marcha con las fuentes para sitios web.
Búsqueda de tipos de letra profesionales para @font-face
Una sorpresa común para los diseñadores es que comprar una licencia de fuente (para usar en tu diseño gráfico, por ejemplo), no significa que puedas usarla en @font-face. Las licencias para @font-face (o incorporación web) suelen venderse por separado. Lea el acuerdo detenidamente y no dude en comunicarse con la fundación de fuentes si tiene alguna pregunta. Fontspring es una boutique de fuentes que vende cientos de fuentes profesionales de calidad, todas ellas listas para usar con @font-face. FontFont y otras fundaciones comenzaron a vender licencias de @font-face de forma directa, aunque actualmente solo tienen como objetivo WOFF y EOT, lo que excluye una porción considerable (pero en reducción) del mercado de navegadores. Muchas fundiciones están agregando licencias de fuentes para sitios web a sus catálogos, pero si no puedes encontrar una que use el tipo de letra que elegiste, comunícate con ellas para preguntarles sobre ella.
Cómo tratar con FOUT
Flash of Unstyled Text es un fenómeno en Firefox y Opera que pocos diseñadores web disfrutan. Cuando aplicas un tipo de letra personalizado a través de @font-face, hay un momento breve en el que se carga la página, en el que aún no se descarga ni se aplica la fuente, y se usa la siguiente fuente de la pila font-family. De esta manera, se produce un destello de una fuente diferente (por lo general, menos atractiva), antes de que se actualice.
Google Font API acompaña a WebFont Loader, una biblioteca de JavaScript que apunta a proporcionar una serie de hooks de evento y te ofrece mucho control sobre la carga. Veamos cómo puedes hacer que otros navegadores imiten el comportamiento de WebKit de ocultar el texto alternativo mientras se carga la fuente @font-face.
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
Si JavaScript está inhabilitado, el texto seguirá visible todo el tiempo y, si de alguna manera la fuente falla, volverá a una serif básica de forma segura. Considera esta medida temporal por ahora: la mayoría de los expertos en fuentes web desean ocultar el texto alternativo durante 2 a 5 segundos y luego revelarlo. Los dispositivos móviles y los anchos de banda bajos se benefician notablemente con este tiempo de espera. Es entendible que Mozilla esté solucionando esto pronto.
Una solución más liviana, pero menos eficaz, es la propiedad font-size-adjust, que actualmente solo se admite en Firefox. Te brinda la oportunidad de normalizar x-height en una pila de fuentes, lo que reduce la cantidad de cambios visibles en FOUT. De hecho, el generador de Font Squirrel acaba de agregar una función en la que se indica la proporción de altura x de las fuentes que subes, de modo que puedas establecer el valor font-size-adjust con precisión.
Resumen
Las fuentes web ofrecen bastante libertad a los diseñadores y, con las próximas funciones, como las ligaduras discrecionales y las alternativas estilísticas, tendrán mucha más flexibilidad. Por ahora, puedes confiar en la implementación de esta parte de CSS3, ya que abarca el 98% de los navegadores implementados. ¡Que lo disfrutes!