Si deseas saber qué es font-face y cómo se aplica, ve a una pequeña introducción, AQUÍ.

Ya que han entendido qué es Font-face, procedamos a aplicarlo al blog.

Para añadir un atributo Font-face a tu blog, primero debes tener la fuente que quieres añadir a tu blog.
 Para este tutorial utilizaremos la fuente Raleway Regular, que es la fuente que yo utilizo en mis posts.

Una vez que tengas la fuente, deberás convertirla a una versión que pueda verse en la web, existen muchísimos convertidores para realizar dicha tarea, pero algunos restringen fuentes por motivos de derechos de autor, así que elige con cuidado.

Para este tutorial, utilizaremos este convertidor, ya que no restringe fuentes.

Abrimos la web y añadimos la fuente que vamos a utilizar, haciendo click en “Add Font”, puedes añadir las fuentes que quieras para convertir, pero para este tutorial sólo añadiremos una.


Cuando la fuente cargue, haz click en “Convert” y espera a que la convierta.

Luego clickea “Download” para descargar el archivo .zip con tus fuentes convertidas.

Dentro del archivo .zip estarán cuatro archivos (Si añadiste sólo una fuente), un archivo .ttf, un .eot, un .woff, y una hoja de estilos css.

Necesitas subir las fuentes a algún servidor, en este caso yo uso DropBox, te lo recomiendo.

Sube los tres archivos de fuente (ttf, eot, y woff) a DropBox.

Para obtener el enlace de tus fuentes, da click en donde dice compartir y copia el link. Este link te lleva a la página de descarga del archivo, no al archivo, por lo que deberás cambiar el link para que la fuente se muestre.

Por ejemplo, si tu link es:

 https://www.dropbox.com/s/4sxy2ke5xgb6ie9/Raleway-Regular.eot?dl=0

Sustituye el www. Por dl. y elimina "?dl=0"
Así:

https://dl.dropbox.com/s/4sxy2ke5xgb6ie9/Raleway-Regular.eot

Una vez tengas los links, modifica este código con tus links:

/*Esta parte de código debe permanecer intacto para su correcto funcionamiento, y por asuntos legales. Gracias a CPBF.cf por el código. */

@font-face {
    font-family: 'name';
    src: url('fuente.eot’);
    src: url('fuente.eot?#iefix') format('embedded-opentype'),
        url('fuente.woff') format('woff'),
        url('fuente.ttf')  format('truetype');
    font-weight: normal;
    font-style: italic;
}

La parte roja, es el nombre con el que identificarás tu fuente en el código. El nombre debe ir todo junto y preferiblemente en minúsculas. Cada fuente debe tener un nombre único, no lo olvides.
La parte verde, es donde sustituirás por tus links.
La parte naranja es preferible que la copies del archivo stylesheet.css que venía en el .zip que vimos hace rato, ya que se me hace un poco complicado explicarlo. (Para abrir archivos .css da click secundario al archivo y luego click en “Editar”)

Luego, para añadir este código a tu blog, busca <[[b:skin y pega el atributo font-face justo encima, así:

Puedes añadir cuantos font-face desees, uno debajo de otro, siempre encima de <[[b:skin.

Si llegaste hasta esta parte del tuto te felicito, eres perseverante. Házmelo saber en un comentario, así continuo con esta serie de tutoriales, si no, voy a entender que nadie lee los tutoriales hasta abajo haha.

Bueno, aquí concluye este tutorial, espero haber dejado en claro que es font-face y cómo se usa.