En nuestra serie de CSS3 ya hemos hablado sobre las pseudoclases y las media queries. Hoy voy a hacer una introducción a las propiedades de las fuentes en CSS3, algunas como veremos, no tan nuevas.
CSS nos da la posibilidad de controlar la apariencia de las fuentes que utilizamos en nuestros sitios web. Podemos fijar cosas como su familia, el peso, el tamaño, las decoraciones, el interlineado y mucho más. Todas esas opciones no son nuevas, algunas de ellas llevan con nosotros mucho tiempo. Un entendimiento y uso adecuado de las propiedades de las fuentes en una página web es muy importante para dotar a nuestros sitios de un aspecto agradable.
En CSS se definen cinco familias de fuentes genéricas dentro de la que la mayoría de las fuentes se categorizan.
| Nombre | Ejemplo |
|---|---|
| Serif | Times New Roman |
| Sans-Serif | Helvetica y Arial |
| Monospace | Courier New |
| Cursive | Caflisch Script |
| Fantasy | Papyrus |
Obviamente, no todos los sistemas operativos instalan las mismas fuentes en el sistema. Además, los diferentes fabricantes de navegadores instalan o utilizan fuentes predeterminadas para cada una de estas familias.
Para asegurarnos de que independientemente del navegador o sistema donde nuestras páginas —y nuestros textos— sean renderizadas, fijamos una pila de fuentes a través de la propiedad de CSS font-family. Así siempre podemos definir como último recurso una de las cinco fuentes genéricas y si el sistema del cliente no tiene cierta fuente instalada, renderizará una fuente genérica de la misma familia.
El como utilizar las fuentes de manera inteligente y para que caso es más conveniente cada una de ellas se escapa de largo del cometido de este post, pero es un tema del que hablaré en el futuro con mayor profundidad analizando entre otros asuntos importantes la experiencia de usuario y la accesibilidad.
Un problema obvio
Si nos damos una vuelta por Internet a los mandos de nuestro navegador web preferido y visitamos un número al azar de páginas, veremos un patrón que se repite de forma continua. Siempre nos encontraremos con cinco fuentes: Arial, Georgia, Verdana, Trebuchet MS y Times New Roman. Esto ocurre así porque estas fuentes están instaladas por defecto prácticamente en todos los sistemas operativos.
Pero ¿qué ocurre si yo quiero usar un tipo de fuente Impact para un elemento de encabezado en lugar de Arial o Helvetica?. Pues que tendrás que usar una pila de fuentes y cruzar los dedos para que el sistema cliente que renderice tu página tenga la fuente instalada.
font-family: Impact, Helvetica, Arial, sans-serif;Vale, pero yo quiero que el título de mi artículo use la fuente impact y no otra. Pues entonces solo queda una solución que pasa forzosamente por utilizar una imagen en JPG, GIF o PNG con el texto y la fuente que quieras y utilizarlo para el encabezado, y no te olvides de las reglas de accesibilidad al utilizar la etiqueta img en tu encabezado. Que mal rollo ¿verdad?.
Esa solución no es óptima porque debes cargar un archivo de imagen para mostrar el título de un simple encabezado. Además a primera vista no parece demasiado dinámico, no puedes generar texto para cada necesidad sino que tienes que generar una imagen nueva para cada elemento al que quieras aplicársela.
Obviamente, existen librerías en diferentes lenguajes de programación como GD en PHP o PIP en Python que ayudaban a generar imágenes de forma dinámica. Algunos desarrolladores se inclinaban por el uso de Flash para ese cometido. Ninguna de esas soluciones era ni elegante ni óptima.
Web-safe Fonts
Como esto era claramente un problema para los diseñadores web, la comunidad acordó cierto rango de fuentes que vienen instaladas en la mayoría de sistemas operativos y navegadores y utilizando una pila de fuentes específica podría cubrirse la mayoría de los usos y necesidades de forma independiente al sistema cliente, por supuesto, en teoría.
No existe ningún tipo de garantía de que dichas fuentes se encuentren de manera alguna instaladas en el dispositivo que nos visita, pero digamos que el uso de este rango de fuentes que ha sido mayoritariamente aceptado es un salto de fe. Las fuentes seguras para la web son las siguientes:
font-family: Arial, Helvetica, sans-serif;
font-family: 'Arial Black', Gadget, sans-serif;
font-family: 'Bookman Old Style', serif;
font-family: 'Comic Sans MS', cursive;
font-family: Courier, monospace;
font-family: 'Courier New', Courier, monospace;
font-family: Garamond, serif;
font-family: Georgia, serif;
font-family: Impact, Charcoal, sans-serif;
font-family: 'Lucida Console', Monaco, monospace;
font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-family: 'MS Serif', 'New York', sans-serif;
font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
font-family: Symbol, sans-serif;
font-family: Tahoma, Geneva, sans-serif;
font-family: 'Times New Roman', Times, serif;
font-family: 'Trebuchet MS', Helvetica, sans-serif;
font-family: Verdana, Geneva, sans-serif;
font-family: Webdings, sans-serif;
font-family: Wingdings, 'Zapf Dingbats', sans-serif;Vale, esto resuelve el problema de la fuente Impact… o no. Al no existir garantías, esto no resuelve nada y tampoco resuelve el escenario de que queramos usar una fuente diferente a las que hay listadas. Había que buscar una solución real al problema.
Webfonts a la carta
Durante años ha existido una técnica disponible para descargar fuentes directamente desde el servidor web y utilizarlas para renderizar los diferentes elementos de nuestros documentos web. ¿Qué por qué no se usaba dices?. No te preocupes que yo te lo explico.
Breve historia de @font-face
Las fuentes descargables no son una idea novedosa. En 1998 CSS2 describía una forma de enlazar fuentes desde las hojas de estilo para poder ser usada en los documentos. Internet Explorer y Netscape añadieron soporte para las fuentes web pero no añadieron soporte para el formato de fuente más utilizado de largo, el formato TrueType.
En lugar de eso dijeron. ¿Por qué no usamos un formato que no usa ni el tato y eso nos eleva al estatus de genios?. Y eso hicieron, EOT (Embedded Open Type) para Internet Explorer y TrueDoc para Netscape. Obviamente absolutamente nadie utilizo la definición ya presente en CSS2 que además desapareció en CSS2.1 porque no la usaban ni en la W3C.
En CSS3 las web fonts vuelven a la definición y las cabezas pensantes de los fabricantes de navegadores esta vez han incluido el formato TrueType además de Open Type, SVG y WOFF. ¿Todos todos?, pues no, Internet Explorer solo soporta nuevamente el formato EOT en su versión 8. IE9 parece que soporta OTF, WOFF y TTF con restricciones.
El truco consiste un incluir en nuestros archivos CSS links a múltiples formatos:
OTF/TTF: Safari, Firefox, Chrome, Opera y IE9
EOT: IE4+
SVG: Safari, Safari Mobile, Chrome, Opera
WOFF: Firefox 3.6+, Opera 11.10+, Chrome 5+, Safari 5.1+, IE9+
¿Cómo se usa?
Para utilizarlas de forma segura debemos seguir ocho sencillos pasos.
1. Añadir la regla @font-face
Añadimos la regla @font-face donde definiremos el nombre y la localización del archivo de fuente que queremos usar en nuestro documento:
@font-face { ... }2. Definimos el nombre de la familia de nuestra fuente
Puede ser cualquier cadena de texto a nuestra elección por ejemplo:
font-family: 'Encabezados';3. Definimos el origen del archivo de la fuente en formato EOT
Añadimos siempre el archivo EOT en primer lugar para Internet Explorer pero sin definir un atributo de formato:
src: url('example.com/algunafuente-chulisima.eot');4. Añadimos un señuelo
Esto es un pequeño truco para hacer que IE se salte el resto de la definición. Como IE ignora este atributo, puedes colocarlo antes de los orígenes de fuentes para otros navegadores y así IE se saltará todo el código que de otra manera causaría un error. Podemos insertar lo que queramos, pero para evitar warnings de los navegadores indicando que CSS quiere acceder a un archivo local es mejor usar cualquier carácter aleatorio por ejemplo un smiley sonriente:
src: local('☺'),5. Añadir el resto de orígenes
Añadimos todo el set de archivos origen que queramos fijar:
url('example.com/algunafuente-chulisima.woff') format('woff'),
url('example.com/algunafuente-chulisima.ttf') format('ttf'),
url('example.com/algunafuente-chulisima.svg#webfont') format('svg')6. Añadir peso, estilo y variante (si queremos)
Añadimos las posibles variantes de la fuente:
font-weight: normal; font-style: normal; font-variant: normal;7. Usamos una pila de fuentes web segura
Por ejemplo:
font-family: Helvetica, Arial, sans-serif;8. Añadimos nuestra fuente web a la pila
Vamos a poner nuestra fuente descargable en primer lugar en la pila:
font-family: Encabezados, Helvetica, Arial, sans-serif;Un momento, ¡no me he enterado de nada!. No te preocupes que ahora va el ejemplo gordo.
El ejemplo gordo
@font-face {
font-family: 'Encabezados';
src: url('../fonts/fuentechula.eot');
src: local('☺'), url('../fonts/fuentechula.woff') format('woff'),
url('../fonts/fuentechula.ttf') format('truetype'),
url('../fonts/fuentechula.svg#webfont') format('svg');
font-weight: normal;
font-style: normal;
font-variant: normal;
}
body {
font-family: Helvetica, Arial, sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: Verdana, Georgia, Times, "Times New Roman", serif;
}
h1, .encabezado {
font-family: Encabezados, Verdana, Georgia, Times, "Times New Roman", serif;
}Recursos Online
En Font Squirrel tienes infinidad de kits de fuentes en todos los formatos para nuestros @font-face listos para descargar y usar. Font Squirrel ofrece también un servicio para generar nuestros propios kits
Por supuesto tengo que mencionar el servicio gratuito de Google Font API y Google Font Directory. Existen otros recursos de webfonts pero no pueden competir con la oferta gratuita de Font Squirrel y Google así que no merece ni siquiera la pena nombrarlos.
Conclusión
Las fuentes descargables son una gran funcionalidad que se ha echado en falta durante mucho tiempo. Lo paradójico es que desde la especificación de CSS2 en 1998 estaba ahí pero no se le dio ningún tipo de uso porque los fabricantes no se acogieron a un formato de fuentes ampliamente difundido. Esto deja de manifiesto que un estándar a veces no puede serlo sin el soporte y la ayuda de los fabricantes que deben implementar las especificaciones de forma que sean útiles para los desarrolladores.
Más en Genbeta Dev | Introducción a CSS3
Más Información | Smiley Face Bullet Proof, Developer Apple TextFonts