Introducción a @font-face de CSS

  • Por
Fuentes en CSS 3. Sintaxis y principales características de la regla CSS @font-face, que nos permite utilizar cualquier tipografía en una página web.

A la hora de escoger una fuente para usar en una página web, tradicionalmente se encontraba la limitación de que el usuario tuviera ese tipo de letra instalada en su ordenador, porque de no ser así, los textos se mostrarían con otras tipografías, distintas a las que habíamos elegido. Es por ello que el abanico de fuentes que podíamos utilizar, con la garantía que funcionasen bien en la mayoría de los visitantes, estaba bien reducido a las típicas Arial, Verdana, Times New Roman y poco más.

Bien, pues en la actualidad este problema ya esta solucionado y todo gracias a la regla CSS @font-face. Esta regla nos permite definir en nuestra hoja de estilos cualquier tipo de tipografía, independientemente de si el usuario dispone de ella o no y para ello lo único que debe preocuparnos es que este instalada en nuestro servidor. En el presente artículo explicaremos cómo se puede configurar nuestra hoja de estilos CSS para poder utilizar cualquier fuente que nosotros deseemos.

Importar fuentes tipográficas mediante CSS con @font-face

La mencionada regla @font-face nace con CSS 2 pero hasta CSS 3 no empieza a funcionar y prosperar. En un principio sólo funcionaba en IE 5 y únicamente admitía formatos de fuente .eot, pero con el paso del tiempo otros navegadores ampliaron su soporte, comenzando con Safari 3,1. En la actualidad admite otros tipos de formatos tipográficos como son .ttf y .otf y funciona también con los navegadores Opera 10, Firefox 3,1 y por supuesto, todas las versiones superiores a los navegadores ya citados.

Así pues, nada nos impide ya hacer uso de esta @font-face, para poder utilizar cualquier fuente en nuestra web, con la garantía que se verá perfectamente en todos los navegadores más actuales.

Su sintaxis es la siguiente:

@font-face{
   font-family:<nombre_fuente>;
   src: <source>[,<source>]*;
   [font-weight:<weigth>];
   [font-style:<style>];
}

Con esto definimos el tipo de letra y su ubicación en nuestro servidor. Si queremos utilizar dicha fuente tan solo tenemos que llamarla con font-family en las reglas de estilo que deseemos.

Debemos tener en cuenta que si no encuentra la fuente en nuestro servidor, cogerá la siguiente por defecto que tengamos definida en nuestra hoja de estilos.

Nota: No todos los navegadores admiten todos los formatos anteriormente citados.

  • Firefox 3,6 soporta Opentype, Embedded Opentype y WOFF.
  • I.E. soporta Embedded Opentype
  • Opera soporta Truetype, Embedded Opentype y Opentype
  • Safari 3,1 soporta Truetype, Embedded Opentype y Opentype
  • Google Chrome soporta Truetype, Embedded Opentype
Si queremos trabajar con fuentes distintas a través de @font-face y nos preocupa la compatibilidad con todos los navegadores, comprobaremos que lo más aconsejable es subir las fuentes con formato .eot, que funciona en todos los navegadores. Esto es debido a que IE tan sólo soporta el formato .eot. Por ello, debemos convertir nuestras fuentes a dicho formato, para lo que podemos utilizar el programa Microsoft Weft, cuyo funcionamiento veremos detalladamente en otro artículo.

Ejemplo de uso de @font-face

A continuación colocamos el código de un ejemplo con dos tipos de fuentes, una con formato .eot y otra con formato .otf. El primero se ven en todos los navegadores y en el segundo IE coge otra letra por defecto ya que no admite el formato .otf.

Código de la hoja de estilos:

@font-face {
   font-family: Vivaldi;
   font-style: normal;
   font-weight: normal;
   src: url(VIVALDI0.eot);
}

@font-face{
   font-family: "gothic";
   font-style: normal;
   font-weight: normal;
   src: url(gothic.otf);
}

H1{
   font-family: "gothic";
}

H2{
   font-family: "Vivaldi";
}

Y a continuación el código HTML para ver el resultado:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
   <title>Prueba con estilos de letra distintos</title>
   <link rel="STYLESHEET" type="text/css" href="estilo-font-face.css">
</head>

<body>

   <h1>Estamos probando la letra Gothic (no se verá en IE)</h1>
   <h2>Aqui la letra Vivaldi</h2>
</body>
</html>

Puedes ver el resultado en una página aparte.

Autor

Sara Alvarez

Equipo DesarrolloWeb.com

Compartir

Comentarios

eduardo

16/9/2010
Mmmmm
Muy bueno, note que la extensión .otf cargo mas lenta q la .eot, asi q es muy conveniente usar .eot por que funciona en todos los navegadores y carga al instante, por cierto use la ultima version de Google Chrome.

Alexander

16/9/2010
donde se guarda la font?
En que parte del servidor debemos guardar el tipo de l letra (font) ? en alguna carpeta en especial o puede ir en cualquier parte .

Gracias por su ayuda

Maria Fernanda

08/10/2010
introducción a @font-face de CSS
A este grupo de diseñadores (www.webcad.nicknamenoelle.com.ar) le viene bien todo artículo y/o tutorial relacionado con estilos CSS. MUCHAS GRACIAS!

PoloDesign

29/3/2011
¿Se puede explicar mejor...?
Es una gozada leer este manual. Maravillosamente expuesto.


Enhorabuena.

P.D. No soy familiar del que publica.

Pablo

02/6/2011
Gracias!
Todas mis dudas aclaradas!

Cotelandia

07/2/2012
Font
Vivaldi no se ve bien en la última versión a la fecha de firefox (10.0)

Cotelandia

07/2/2012
Font
En cambio si lo hace IE 9

francesc_sala_giralt

07/2/2012
Faltan las comillas
No se ve bien, creo, porque faltan las comillas en la declaración:

@font-face {
font-family: Vivaldi;

Ciccerone

06/5/2012
ttf Adorable
Aunque ya he utilizado el face-font con otras fuentes me encuentro con un problema con la fuente "Adorable"

Os dejo la declaración de css a ver si le veis que ocurre

@font-face {
font-family: Adorable;
font-style: normal;
font-weight: normal;
src: url(http://www.dejavu.queidea.com/lletra/MLSJN.TTF);}

Muchas gracias
PD; Por cierto, no felicitaros por el web sería un sacrilegio

enric-Barna

wavymaf

11/9/2012
probar con esto
Aqui lo solucinaron de una forma poco convencional... pero a mi me funciono!

http://maragu.com/Articulos/PersonalizarFuentePaginaWebVariosNavegadores.php

LandoBaez

18/1/2013
EOT no aceptado en FF
Al no ser un estándar del W3C, Firefox no acepta la extensión '.eot'.
Por lo tanto, si se quiere tener compatibilidad con todos los navegadores, hay que utilizar, al menos, dos extensiones (una de ellas debe ser '.eot' como se comenta en el artículo)

Saludos,

P.D.: Excelente artículo, muy bien sintetizado.