Tipografía en CSS: Tipos

Imprimir

La fuente (tipografía o tipo de letra)  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 (porque está en nuestro ordenador). Es decir, la página web la verán tal como es si dicha fuente instalada en el el ordenador del que está visualizando la página.

Hay una lista de tipografías estándares que los navegadores más polulares saben interpretar, pero y el resto de tipografías, ¿las podemos utilizar?. La respuesta es sí, salvando algunos inconvenientes técnicos y de copyright; vamos a ver como resolver los primeros.

Desde hace un tiempo existen varias alternativas para poder emplear tipografía "no estandar" como FLIR o la propiedad @font-face de CSS3. No obstante estas alternativas tienen en contra que, a veces, no es fácil su implementación. Otra manera más fácil de utilizar fuentes distintas a las que los navegadores reconocen por defecto es hacer uso de la API de Google Font.

La API de Google Font

Como ya he dicho, una forma fácil y rápida de utilizar tipografía "no estandar" en nuestro sitio web es usar la API que Google pone gratuitamente a nuestra disposición. No es que podamos elegir entre cientos de tipos, pero algunos hay y bastante interesantes. lista completa de tipografías incluidas en el API.

Vamos al asunto, ¿cómo utilizar una de estas fuentes?, pues añadiendo 2 líneas:

Esta línea en la sección <head> de la página HTML

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Font+Name" />

Cambiando Font+Name por el de la tipografía que deseamos utilizar (los nombres aparecen en la página de Google Font). Si lo deseamos y queremos usar más de un tipo lo indicamos como parametros separados por la barra |.

Seguídamente tenemos que activar la tipografía instalada en alguna regla css de nuestro archivo de estilos, por ejemplo en los encabezados:

h1 { font-family: }

La propiedad @font-face de CSS3

Los responsable de la normativa CSS se están tomando en serio todo el asunto de la tipografía y CSS3 define la propiedad font-face, una propiedad que permite definir cualquier tipografía en base al archivo fuente de la misma.

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/ , http://www.fonts.com, etc...

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

Este es un ejemplo donde aplico 4 tipos de fuentes "no estándar" en cada uno de los ítems del menu que aparece.

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

La librería Facelift (FLIR)

Los diseñadores pueden implementar cualquier familia de fuentes utilizando esta tecnología.

aula_virtual_3con14

Utilidades

imprescindibles FireFox Google Chrome Opera Safari Acrobat Reader 7zip Flash Player Java FileHippo

Visitas...

TOTAL168543