Tutorial: Usa cualquier fuente en tu web usando CSS3

Hola. Traigo un nuevo tutorial.

Seguro que os habéis preguntado como integrar en una página web absolutamente cualquier fuente que usemos de forma local. Pues con CSS3 es de lo más sencillo.

Empezamos por añadir en una hoja de estilo o entre las etiquetas <style> y </style> la siguiente sintaxis:

Código :

@font-face {
    font-family: "el-nombre-que-quieras-poner";
    src: url( fuente.otf );

Hay que tener en cuenta que el nombre que indicamos en font-family no es necesariamente el de la fuente, sino el que vas a indicar en el momento de asignar dicha fuente a una clase.

Por otra parte, la URL también dependerá de si el archivo está en la misma carpeta que el HTML o si habrá que subir o bajar algunos directorios.

Bien, hecho esto, ahora solo hace falta indicar donde queremos usar esta fuente.

Si, por ejemplo, queremos que se nos aplique en una cabecera h1 que tenga un tamaño de 26 píxeles, escribiremos:

Código HTML :

h1 {
    font-family: "nombre-que-hayamos-indicado-antes;"
    font-size: 26px;

Hecho esto, todos los textos contenidos entre etiquetas <h1> y </h1> se formatearán con esa fuente y tendrán un tamaño de 26px.

Ahora bien, os habréis fijado que he usado una fuente .otf en mi ejemplo. Debéis saber que si usamos fuentes .otf no funcionarán en Internet Explorer y que para que lo haga debemos convertirlas al formato EOT.

Conviene además indicar de nuevo todo dentro de <!--[if IE]> y <![endif]-->.

Eso es todo, ya puedes usar las fuentes que quieras en tu página web.


Espero que haya sido de utilidad. Si tienes alguna pregunta, no dudes en formularla en los comentarios.

Lamentablemente esto no es tan fácil. OTF no es leído por todos los navegadores y el estandar recomendado es WOFF. iPhone y iPad sólo leen SVG y tal como mencionaste, todos los IE anteriores a IE9 requieren EOT. IE9 requiere WOFF.

Es un buen inicio de tuto, pero dado que su contenido no es factual, lo paso a Aportes.

Bueno, es cuestión de añadir condicionales para cada navegador. Existen en la red muchos conversores de fuentes que nos permiten convertirlas para luego insertarlas en el código.

viruscorp escribió:

Tampoco funciona así, imagino que no has usado esto en producción de una manera sensata.

Necesitas componer de una manera especial el font-face para darle prioridad a los .eot, saltar las restricciones de IE6/7 respecto a otras fuentes y luego ponerlas en un orden especifico.

Los .SVG necesitan el nombre interno antes de funcionar correctamente en un hash frente a ellos, como las anclas.

El .OTF no está tan ampliamente soportado como el TTF y ninguno tiene la protección de licencias que tiene WOFF o EOT.

Aprende esos pequeños detalles, que son claves para el tema de font-face y tendrás un gran tuto.

Gracias maestro.

Tienes todo mi respeto