CSS: Utilizar cualquier tipografía con @font-face

El hecho de poder usar cualquier tipografía en CSS siempre ha sido uno de los puntos débiles de la maquetación. Sólo había dos opciones, resignarse y cambiar de fuente por una de las “seguras”  incluidas en el propio sistema, o probar alguna de las técnicas surgidas  para utilizar tipografías, ya fuera utilizando Flash (sIFR), Canvas/VML (Cufón), la librería GD de PHP (FLIR),  javascript,   así como sistemas de detección de fuentes instaladas. Todos estos métodos funcionaban más o menos bien, pero solamente eran parches para solucionar una deficiencia.

La implementación de  “@font-face” en CSS, deja a un lado cualquiera de los métodos anteriores para dar paso al más sencillo y directo. @font-face es una propiedad soportada por la mayoría de los navegadores, con su uso podremos implementar el tipo de tipografía que nos gusta en nuestras paginas y que nuestros visitantes puedan visualizarla tal como nosotros deseamos, sin necesidad de tener la fuente instalada en su PC.

El código para su uso es el siguiente:

//definimos la fuente y su nombre:

@font-face{
font-family: ‘nombredemifuente’;
src: url(‘../fonts/mifuente.otf’);
}

// y a la hora de usarla:

Font-family: “nombredemifuente”;

Por supuesto debemos tener en cuenta ciertos detalles a la hora de utilizar esta técnica. Un dato a tener en cuenta es el tamaño del archivo de la fuente, puesto que para ser utilizado. Otro detalle y el más importante es el formato. No todos lo navegadores admiten el mismo formato de fuente por lo tanto deberemos implementar en @font-face la fuente en los formatos necesarios para los navegadores.

.OTF // .TTF – Firefox, Chrome, Safari.
.EOT – Internet Explorer.
.SVG – Safari para Iphone.

En cuanto al formato de la fuente que queremos usar, se suele encontrar en TrueType. Y la cuestión es: ¿Cómo conseguimos todos los necesarios?
La respuesta es FontsSquirrel.
Esta Web posee un generador que permite subir nuestra fuente, y convertirla al formato que necesitemos, incluso nos proporciona el código CSS para implementarlo.

1- Vamos a la opción “ @font-face Generator” del menú.

2- Marcamos la opción “Agreement” y pulsamos en “Add Fonts” para subir la fuente que vamos a utilizar.

3- Automáticamente se genera el @font-face Kit con nuestra fuente en los formatos: .TTF .WOFF .SVG y .EOT. Ya solo nos queda descargar el Kit en el cual se incluye un .CSS con el código necesario para su implementación.

Esperamos que haya sido de utilidad en vuestro uso del CSS.

2 comentarios

  1. Sol Martin dice:

    Puede utilizarse para enviar boletines de noticias en formato HTML?
    Precisa de alguna variación?

    • jose dice:

      Pues me temo que no es posible. El archivo de la fuente necesita estar alojado en el mismo dominio que el archivo HTML. Por tanto en el boletín no funcionará la fuente al buscarla en un sitio externo. Saludos

Deja un comentario

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

*


*