blog banner

Tipografías en css3: font-face

En la implementación web siempre se debe tener en cuenta que por muy bonito que quede un diseño que nos han pasado en imagen con tipografía bonita-sans-Roman (nombre inventado, no lo busquéis) no lo podremos implementar tal cual ya que si el tipo de letra no está instalado en nuestra máquina, el navegador mostrará los […]

En la implementación web siempre se debe tener en cuenta que por muy bonito que quede un diseño que nos han pasado en imagen con tipografía bonita-sans-Roman (nombre inventado, no lo busquéis) no lo podremos implementar tal cual ya que si el tipo de letra no está instalado en nuestra máquina, el navegador mostrará los caracteres con su fuente configurada por defecto. Por ello, siempre se acaba maquetando web en tipografías consideradas estándar como pueden ser verdana, helvetica/arial, «Times new Roman», Tahoma, sans-serif…

En las especificaciones de css3 existe @font-face que permite declarar tipografías no-estándares en nuestros css para mostrarlas en cualquier máquina, con independencia de si la fuente se encuentra instalada o no en el sistema que reproduce la página web.



Implementación de @font-face
La implementación en css es muy sencilla:

@font-face {
  font-family: Gentium;
  src: url(http://example.com/fonts/Gentium.ttf);
}

Con esta simple entrada declaramos una fuente llamada Gentium (podríamos llamarla como quisiéramos) que posteriormente podremos usar donde queramos en la hoja de estilos.


p { font-family: Gentium, serif; }

NOTA: Se debe asignar siempre (por el momento y mientras no se pueda garantizar que todos los navegadores cumplan el estándar css3) una fuente secundaria de las consideradas estándar para controlar los casos en que el navegador no pueda interpretar @font-face.

En la declaración del font-face se debe incluir además la url (parámetro url) en la que el navegador puede encontrar el fichero con la tipografía que se desea incluir. La url puede ser relativa al css (url(miTipo.ttf)), absoluta ( url(/lib/fuentes/miTipo.ttf) o url(http://fuentes.com/fuentes/mitipo.ttf))

Según la especificación, en caso de que el nombre de fuente indicado sea el mismo que una disponible en el sistema cliente, en el navegador se mostrará la tipografía indicada por css, prescindiendo de la predefinida por el sistema. Aunque esta conducta se puede cambiar de la siguiente manera:

@font-face {
  font-family: MyGentium;
  src: local(Gentium Bold),   /* nombre completo de la fuente*/
       local(Gentium-Bold),   /* nombre Postscript*/
       url(GentiumBold.ttf);  /* si no existe, descárgalo */
  font-weight: bold;
}

Con esta declaración estamos indicando al sistema que primero busque la fuente en la máquina cliente para que no sea necesaria su descarga y en caso de que no se encuentre en local, la descargará de la ruta indicada.

Si queremos asegurar que la fuente local no se cargará, lo podemos especificar mediante la siguiente entrada:

src: local(«#»)

Esto fuerza a que vaya a buscar un fichero local y no lo encuentre, por lo que buscará la alternativa que será la descarga.


Tipos de ficheros fuente
Otra de las especificaciones de css3 es la posibilidad de soportar diferentes formatos de fichero para las tipografías. En concreto se permiten les formatos Web Open Font Format, TrueType, Opentype, Embedded OpenType y SVG.

Los formatos se indican en la misma línea que la URL:

src: url(ideal-sans-serif.woff) format("woff")
src: url(ideal-sans-serif.ttf) format("truetype")
src: url(ideal-sans-serif.otf) format("opentype")
src: url(ideal-sans-serif.eot) format("embedded-opentype") 
src: url(ideal-sans-serif.svg) format("svg")
 

¿De dónde obtener fuentes?
Hay numerosos repositorios en la red, pero por nombrar a dos:

http://www.fontsquirrel.com/
http://www.google.com/webfonts 

EDIT: He probado este último sistema y es diferente de lo que aquí se explica. Me remito a: http://sergi.perpina.net/2011/12/webfonts-de-google-guia-de-uso.html

Compatibilidad a día de hoy
Curiosamente, el primer navegador en implementar esta funcionalidad fue Internet Explorer y posteriormente lo fueron implementando el resto hasta soportarlo la mayoría de navegadores modernos, salvo alguna excepción como Opera mini que supongo implementarán en breve.

Otro cantar son los tipos de fichero de fuente soportados. Mientras que la mayoría de navegadores interpretan sin problema los ficheros TTF, OTF y WOFF, Internet Explorer lo hace únicamente a partir de la versión 9 del navegador. Para que el navegador de Microsoft en versiones anteriores a la 9 disponga de tipografías personalizadas, el formato debe ser el EOT.

Mientras, los navegadores van implementando progresivamente las fuentes SVG, aunque este formato aún no es soportado por IE ni Firefox.



Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *