Cómo utilizar cualquier tipografía en tu sitio web

A medida que pasa el tiempo utilizar en nuestros diseños tipografías poco comunes se vuelve una tarea mas sencilla y practica. En un principio todo consistía en utilizar imágenes con los títulos o textos que presentarían una fuente que no estuviera instalada en las computadoras de los usuarios que visitaban nuestra web. Después se desarrollaron diferentes técnicas que no tuvieron mucho éxito, como sIFR que utilizaba Flash.

Hasta hace poco una de los métodos utilizados era Cufon que se maneja a través de jQuery. Pero actualmente y gracias a HTML5 y CSS3, podemos usar cualquier tipografía sin complicaciones por medio de @font-face. Si bien esta propiedad ya existía desde CSS 2.1, estaba bastante limitada, hoy en día acepta formatos como .eot, .ttf y .otf (los dos últimos no son soportados por IE9 ni versiones anteriores). A continuación explicare la aplicación básica del método.

El primer paso es importar la fuente. Tenemos dos opciones, subir la fuente deseada a nuestro directorio (por ejemplo en una carpeta “fonts”) o importarla desde Google Web Fonts (donde hay alojadas mas de 500).

La sintaxis para el primer caso es la siguiente:

@font-face { 
   font-family: 'BabelSans'; 
   font-style: normal; 
   font-weight: normal; 
   src: url(BabelSans.ttf); 
}

Una vez realizado este paso, la implementación al elemento es la siguiente:

p { 
   font-family: "BabelSans";
}

En caso de elegir una fuente de Google, primero debemos incluir el código que nos provee en el HTML:

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

Y finalmente lo asignamos al elemento desde CSS:

h2 {
   font-family: "Ranchers", "Arial", sans-serif;
   font-size: 0.9em;
   font-weight: normal;
}

Leave A Comment

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