Cuando hablamos de fuentes para páginas web, podemos distinguir tres tipos de fuentes:
- Fuentes de sistema: las fuentes de sistema son las fuentes que están instaladas en el ordenador cliente.
- Fuentes web seguras o web safe fonts: se denominan así aquéllas fuentes que están disponibles en prácticamente la totalidad de las computadoras por estar ampliamente extendidas, e incluyen las fuentes que se instalan en la mayoría de los ordenadores Mac, Windows y Linux. De esta manera, nos aseguramos dentro de lo posible, de que todos los usuarios de nuestra web obtengan el mismo look y estilo al acceder a nuestra página, independientemente de su máquina. Sin embargo, no hay ninguna garantía de que el equipo cliente disponga de dichas fuentes.
- Fuentes web: las fuentes web permiten usar fuentes que no están instaladas en el ordenador del visitante.
Las fuentes a utilizar en una página web suponen un tema de gran importancia para que todos aquellos que accedan a la página obtengan el mismo look y estilo, ya que que las fuentes de sistema difieren de un equipo a otro en función del Sistema Operativo y del navegador. Ni siquiera empleando las denominadas fuentes web seguras se tiene la garantía de que el equipo cliente disponga de dichas fuentes.
Fuentes web
La única manera de asegurarse al 100% de que todos los equipos clientes visualizan las mismas fuentes, independientemente del dispositivo, Sistema Operativo y navegador, es emplear fuentes web, fuentes que no sean de sistema y que por tanto no están instaladas en el ordenador del visitante.
Básicamente, hay dos modelos para implementar fuentes web:
- Fuentes web embebidas: son sistemas que permiten utilizar las fuentes alojadas en el servidor del proveedor de fuentes. Los servicios de fuentes web embebidas más utilizados son Typekit (de pago, typekit.com) y Google Web Fonts (gratuito, google.com/webfonts).
Por ejemplo, para emplear en nuestra página web la fuente Open Sans de Google Web Fonts (developers.google.com/webfonts), añadiremos en el <head> el siguiente código HTML:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans">De esta manera, la fuente Open Sans estará disponible en el código CSS, por ejemplo de la siguiente manera:
p { font-family: 'Open+Sans', Arial, sans-serif; font-size: 48px; }
Nota
- Al emplear fuentes web embebidas siempre debemos listar alguna fuente segura y/o genérica, por si acaso el servidor estuviera inaccesible.
- Los espacios en el nombre de la fuente se reemplazan por signos "+".
- Fuentes embebidas usando @font-face: en este caso las fuentes están alojadas en el propio servidor de la página web, por lo que no depende de servidores de terceros. @font-face fue eliminado de CSS2 pero ha sido reintroducido en CSS3 y es soportado por todos los navegadores modernos.
El principal repositorio de fuentes libres es FontSquirrel (fontsquirrel.com), de donde nos podremos descargar un archivo ZIP que incluye la fuente en diversos formatos, como TTF, WOFF, EOT y SVG, junto con el código CSS y HTML de ejemplo. Incluiremos en nuestro CSS links a cada formato, ya que cada navegador soporta determinados tipos de ficheros:
- TTF: Safari, Firefox, Chrome, Opera y IE9.
- WOFF: Firefox 3.6+, Opera 11.10+, Chrome 5+, Safari 5.1+, IE9+.
- EOT: IE4+.
- SVG: Safari, Safari Mobile, Chrome, Opera.
Por ejemplo, una vez descargado el ZIP correspondiente a la fuente DroidSansRegular y subidos los ficheros al servidor web, para utilizarla incluiremos el siguiente código CSS:
@font-face { font-family: 'DroidSansRegular'; src: url('DroidSans-webfont.eot'); src: url('DroidSans-webfont.eot?#iefix') format('embedded-opentype'), url('DroidSans-webfont.woff') format('woff'), url('DroidSans-webfont.ttf') format('truetype'), url('DroidSans-webfont.svg#DroidSansRegular') format('svg'); font-weight: normal; font-style: normal; } p { font-family: 'DroidSansRegular', Arial, sans-serif; font-size: 48px; }