<Código-Web>
Elementos HTML
y Reglas CSS

  1. TEXTOS
  2. ENLACES
  3. LISTAS
  4. IMÁGENES
  5. TABLAS
  6. FORMULARIOS
  7. MAQUETACIÓN

TEXTOS > Tipografía

 

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 sólo está en nuestro ordenador). Es decir, la tipografía de una página web se ve tal y como es si dicha fuente está instalada en el el ordenador del usuario que está visitando la página.

Puesto que no todas las fuentes están disponibles en todos los ordenadores (hay miles de fuentes, y la mayoría no son gratuitas), CSS nos ofrece un mecanismo para indicar fuentes alternativas: se indica primero la fuente deseada y a continuación todas las que puedan sustituir a la primera, si ésta no estuviera disponible; la lista debería terminar con el nombre de una familia de fuente (W3C define cinco familias: serif, sans-serif, monospace, cursive y fantasy). Por ejemplo:

h4 {font: 1.6em "Trebuchet MS", Arial, Helvetica, sans-serif; color: #999999;}

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 dos inconvenientes: técnico y de copyright; vamos a ver como resolver el primero, el segundo no necesita explicación alguna.

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 usar la API de Google Font.

La API de Google Font

En Google Font podemos elegir entre cientos de tipos, y algunos hay bastante interesantes: Lista completa de tipografías incluidas en el API.

Para utilizar una de estas fuentes podemos utilizar 2 métodos:

MÉTODO 1:

Añadimos esta línea en el archivo HTML, sección <head>:

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

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

MÉTODO 2:

@import url(http://fonts.googleapis.com/css?family=Nombre+Fuente);

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

h1 {font-family: Font+Name;}

Por ejemplo:

Añadiendo esta línea dentro de <head> del archivo HTML:

<link href='http://fonts.googleapis.com/css?family=Great+Vibes' 
rel='stylesheet' type='text/css' />

Y creando esta regla en el archivo CSS:

.font-google1 {font: 2.5em 'Great Vibes', cursive;}

Obtenemos esta tipografía en nuestra página Web:

Tipo de fuente no estandar de Google Font

En el párrafo anterior he colocado esto en el archivo HTML:

<p class="font-google1">Tipo de fuente no estandar de Google Font</p>

 

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 OpenType (.otf) o TrueType (.tff) 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 la mayoría de los navegadores actuales.

Para utilizar un tipo de fuente "no estandar" seguimos estos pasos:

  1. Conseguimos el archivo .otf o .tff de la fuente que nos guste
  2. Declaramos en el archivo de estilos CSS la fuente
  3. Creamos la regla CSS que la use
  4. Colocamos la "marca" correspondiente en el archivo HTML

Por ejemplo:

Añadiendo estas reglas en el archivo de estilos CSS:

@font-face {
font-family: miFont1;
src: url(Bullpen3D.ttf) format("truetype");
} .font-face1 {
font: 2.5em miFont1;
}

Y colocando esto en el párrafo del archivo HTML

<p class="font-face1">Tipografía "Bullpen3D.ttf" utilizando @font-face</p>

Obtenemos esta tipografía en nuestra página Web:

Tipografía "Bullpen3D.ttf"

 

 


- (cc) 2012, 3con14 -