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.
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.
- 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
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>