La Tipografía con CSS

Imprimir

La fuente juega un papel fundamental en el diseño de nuestro sitio Web. De ella depende que un potencial lector siga leyendo o abandone la página porque le resulte demasido incómoda para poder leerla ("percepción del observador").

Algunas veces nos encontramos con un tipo de fuente que nos resulta bonita, si la utilizamos en nuestro sitio Web probablemente sólo nosotros la vemos así pues depende de que dicho "tipo de fuente" esté disponible en el sistema del que está visualizando la página.

Hay una lista de tipografías estándares que todos los navegadores saben interpretar, pero que pasa con el resto de tipografías, ¿podemos utilizarlas?. La respuesta es sí, salvando algunos inconvenientes técnicos y de copyright.

Usando una propiedad @font-face de CSS3:

La propiedad @font-face es muy útil para definir en un sitio Web una fuente que el usuario no tenga instalada en su ordenador. El método consiste en subir la fuente que queremos utilizar a nuestro sitio Web y definirla utilizando CSS.

Para el tipo de fuente se pueden usar el formato TrueType (.tff) o OpenType (.otf) y hay muchos sitios donde podemos descargar gratuitamente fuentes de los dos formatos, algunos de éstos son: http://www.sostars.com/ , http://www.1001freefonts.com/ , etc...

La propiedad @font-face está soportada por Firefox 3.5.x, IE7+, Safari 3+ y 4+

En este ejemplo vemos como aplicar 4 tipos de fuentes "no estándar" en cada uno de los ítems del ejemplo que utilicé para implementar el menú con CSS.

Lo primero es declarar la nueva fuente utilizando la propiedad @font-face y dos atributos necesarios: font-family y src, en este último debemos indicar la ubicación (ruta) del archivo de la fuente, si fuera necesario, en este caso está en una carpeta llamada fonts. De esta forma el navegador la descarga y la asocia para que se pueda mostrar.

En segundo lugar debemos usar la propiedad font-family en la clase o ID donde la vamos a aplicar. Aquí tenéis el código completo de este ejemplo:

css_fuente

endefensadeinternetEl exponente máximo de esta sociedad es Internet, red de redes por antonomasia y la causante de la planetización de la gente corriente. La creación del World Wide Web, en 1989 se debe a Tim Berners-Lee (2000), investigador del Laboratorio Europeo de Física de Partículas (CERN).

internet1

Durante ya bastantes años diseño y preparo una breve Web para mis alumnos de informática. Si aquí no aparece algo distinto de lo que ya se ha dicho espero que, al menos, consiga expresarlo de forma más clara. - Jesús Plaza.
─ El conocimiento es libre ─