Aproximación a @font-face: CSS nos abre el camino de las tipografías

Tecnología Web, , , , , , Sin comentarios

@font-faceLa regla de CSS @font-face es la propiedad que nos permite esquivar la necesidad de utilizar las llamadas fuentes comunes (aquellas con un soporte completo en todos los navegadores y sistemas operativos como Arial, Helvetica o Times) y poder emplear distintos tipos de fuente menos habituales en nuestra programación web.  Gracias a ella tenemos un modo muy útil para mostrar tipografías que normalmente los usuarios no tienen alojadas en su ordenador.

Esto es posible puesto que @font-face funciona sacando del propio servidor (mediante FTP) la fuente seleccionada. Para ello hay que subir la tipografía al servidor y definirla a través de la hoja de estilo. De esta forma se evita tener que recurrir a Flash (sIFR), Canvas/VML (Cufón), la librería GD de PHP (FLIR) o  javascript para mostrar fuentes no comunes.

La regla se define (en su modo más básico) de la siguiente forma en el código:

@font-face {    font-family: DeliciousRoman;

src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf);

font-weight:400;

}

“Font family”: DeliciousRoman establece el nombre de la fuente. Esta declaración  se debe hacer siempre en todos los elementos en los que se quiera mostrar esta tipografía.

A continuación se indica a través de src: url(http://www.font-face.com/fonts/delicious/Delicious-Roman.otf); el lugar de nuestro servidor de donde se debe extraer la fuente para mostrarse.

Por último se indica en font-weight:400 parámetros para que los navegadores no cambien atributos de las fuentes al renderizarlas. En este caso establecemos el peso, pero se pueden establecer muchos otros.

Soporte y recursos para @font-face

Esta propiedad es soportada por los siguientes navegadores web:

  • Internet Explorer desde IE 4
  • Firefox desde 3.5
  • Chrome desde 3.0
  • Safari desde 3.1
  • Opera desde Opera 10

En navegadores móviles es soportado por:

  • iOS 4.0 – Safari
  • iOS 6 – Safari
  • iOS 6 – UCBrowser
  • iOS 6 – Dolphin
  • Android 4 – Default Browser
  • Android 4 – Opera 12 Mobile (Nexus 7)
  • Android 4 – Chrome
  • Android 4 – Firefox
  • Android 4 – Opera Mobile 12 (weird bug, cf infra)
  • Android 4 – Dolphin
  • BBOS 6 – stock browser
  • Windows 8 x86 – IE10

Además, se recomienda el uso del formato de tipo de letra WOFF en las tipografías que utilicemos a través de @font-face, ya que es soportado por la mayoría de navegadores desde su estandarización reciente.

Para generar la regla de @font-face automáticamente y obtener múltiples recursos de tipografía y CSS, recomendamos la página http://www.fontsquirrel.com