Fuentes nuevas en página web, alternativa a Lorem Ipsum

Han cambiado mucho las cosas desde que apareció HTML5 y CSS3. Entre las que me parece interesantes está la posibilidad de añadir fuentes a las páginas web.

Voy a explicar un poco cómo hacerlo utilizando unas fuentes que sirven para crear bocetos de un diseñador llamado Christian Naths Redacted-Fonts.

Las fuentes que se pueden utilizar pueden tener diferentes formatos (extensiones). En mi caso las voy a colocar en un directorio llamado fonts, que cuelga del directorio raiz de la página web.

Descomprimo los ficheros que se encuentran en la carpeta Redacted-Font-master/fonts/web, dentro de la carpeta fonts de mi servidor. En este caso existe un fichero stylesheet.css que define los tipos de letra:

/* Generated by Font Squirrel (http://www.fontsquirrel.com) on March 2, 2013 *
@font-face {
font-family: 'redactedregular';
src: url('redacted-regular.eot');
src: url('redacted-regular.eot?#iefix') format('embedded-opentype'),
     url('redacted-regular.woff') format('woff'),
     url('redacted-regular.ttf') format('truetype'),
     url('redacted-regular.svg#redactedregular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
    font-family: 'redacted_scriptbold';
    src: url('redacted-script-bold.eot');
    src: url('redacted-script-bold.eot?#iefix') format('embedded-opentype'),
         url('redacted-script-bold.woff') format('woff'),
         url('redacted-script-bold.ttf') format('truetype'),
         url('redacted-script-bold.svg#redacted_scriptbold') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'redacted_scriptlight';
    src: url('redacted-script-light.eot');
    src: url('redacted-script-light.eot?#iefix') format('embedded-opentype'),
         url('redacted-script-light.woff') format('woff'),
         url('redacted-script-light.ttf') format('truetype'),
         url('redacted-script-light.svg#redacted_scriptlight') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'redacted_scriptregular';
    src: url('redacted-script-regular.eot');
    src: url('redacted-script-regular.eot?#iefix') format('embedded-opentype'),
         url('redacted-script-regular.woff') format('woff'),
         url('redacted-script-regular.ttf') format('truetype'),
         url('redacted-script-regular.svg#redacted_scriptregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

Este fichero css define el tipo de letras y el nombre que les da: redactedregular, redacted_scriptbold, redacted_scriptlight, redacted_scriptregular.

Ahora tenemos que añadir las definiciones a nuestro proyecto. Para no poner todas las definiciones al principio de un css, que dificultaría la lectura del fichero, yo lo que hago es importarlo desde un css que ya tengo. Añado al principio del fichero esta linea:

@import url(../fonts/stylesheet.css) all;

Dentro de los paréntesis está la ruta hasta el fichero stylesheet.css, en mi caso ../fonts/. Cada uno deberá poner la ruta propia.

Una vez hecho esto ya podemos utilizar las fuentes con el atributo font-family. Por ejemplo, si lo queremos todo con esta letra:

body {
    font-family: 'redacted_scriptregular', Helvetica;
    font-size: 18px;
    line-height:1.2;
}