Instalar Fuentes con @font-face de CSS3

Para Drupal, solo se instala el módulo Google Fonts http://drupal.org/project/google_fonts se configuran los parámetros y ya, asi de simple. En este caso veremos la instalación directa en el servidor, que es menos pesada, y así no instalamos el módulo en caso de usar drupal. Escogemos una fuente en google webfonts http://www.google.com/webfonts, la descargamos y a continuación nos dirigimos a la siguiente URL: http://www.fontsquirrel.com/fontface/generator. Aparece un formulario donde seleccionamos y agregamos la fuente que descargamos con el botón que dice "Add fonts", una ves que la fuente se cargó activamos la casilla de "Agreement" y automáticamente aparecerá un botón que dice "Download your kit", a continuación descarga un archivo en zip con un nombre similar a esto: "webfontkit-20120228-130750.zip" que en realidad los números no son mas que la fecha y la hora de ocurrido el evento. Al descomprimir y examinar esta carpeta nos encontramos con varios tipos de fuentes, que están listas para instalar en el servidor. Las extensiones son: eot, svg y ttf. Lo siguiente que haremos es crear una carpeta en nuestro servidor, directamente en la carpeta del tema que estemos utilizando, por ejemplo: sites/all/themes/mitema/fonts; en el caso de no usar drupal, en donde se les antoje. Dentro de esa carpeta subiremos únicamente los archivos con las extensiones antes mencionadas. Una vez que hayamos hecho esto, vamos a la carpeta descomprimida y buscamos un archivo que se llama stylesheet.css que contiene el siguiente código: @font-face { font-family: 'NombreDeTuFuente'; src: url('ruta-al-archivo/nombre-de-tu-fuente-webfont.eot'); src: url('ruta-al-archivo/nombre-de-tu-fuente-webfont.eot?#iefix') format('embedded-opentype'), url('ruta-al-archivo/nombre-de-tu-fuente-webfont.woff') format('woff'), url('ruta-al-archivo/nombre-de-tu-fuente-webfont.ttf') format('truetype'), url('ruta-al-archivo/nombre-de-tu-fuente-webfont.svg#ChelseaMarketRegular') format('svg'); font-weight: normal; font-style: normal; } En donde básicamente se agregan los archivos de las fuentes con sus respectivos tipos, este código se debe agregar al inicio de tu archivo de estilos y con esto queda instalada la fuente en el servidor. Un ejemplo del modo de uso seria: para las etiquetas h1, h2 y h3. h1, h2, h3{ font-family:"NombreDeTuFuente"; } Automáticamente las etiquetas de h1, h2 y h3 de tu sitio adquieren las propiedades de la nueva fuente. Así de simple.