Cómo poner fuentes personalizadas en Blogger

¿Nunca quisiste utilizar en Blogger esa fuente tan hermosa que encontraste en la web? ¿Su fuente preferida? Y Blogger, por supuesto, no la ofrecía... Eso ya tiene solución y hoy les cuento como hacerlo. No se trata de la fuentes que están en Google Font, no; con este tutorial podrán usar cualquiera de las fuentes que descargan de páginas con daFont o FontSquirrel.

Es algo que me preguntaron varias veces cómo hacer pero la realidad es que antes no lo entendía demasiado bien y no me sentía segura para explicarlo. Como ahora ya lo manejo bien, aquí les explico cómo hacerlo.

*yo no se qué le pasa a Blogger que está subiendo las imágenes con tan mala calidad*

Antes que nada, esto puede resultar confuso a veces y el HTML, bueno, no es que ayude demasiado, cualquier mínimo error puede hacer un caos en nuestra plantilla y no queremos eso. Por esto, les recomiendo que primero hagan una copia de su plantilla de esta forma: Plantilla > Crear/Restablecer copia de seguridad > Descargar plantilla completa

Otra cosa. Vamos a necesitar alojar archivos en alguna página como Dropbox, si no tienen cuenta, les recomiendo que ingresen y se creen una; la verdad no estoy al tanto de si hay alguna página que funcione de forma similar

Ahora sí estamos listos para comenzar. Presten mucha atención.

1. Generando el kit @font-face

Ya que tengas en vista cuál es la fuente que quieres poner en tu blog, vas a ir a esta página y vamos a generar un código que nos permitirá utilizar la fuente elegida. ¿Cómo?

Le das a "+ Add fonts", buscas la fuente que quieras utilizar y luego tildas la casilla que pone "Yes, the fonts I'm uploading are legally eligible for web embedding.". 

Un segundo después te va a salir un botoncito que dice "Download your kit".

2. Subiendo a las fuentes a un servidor como Dropbox

Se descargará un archivo .zip que a su vez contiene varios archivos en su interior. Vas a seleccionar y descomprimir los archivos que te señalo a cotinuación (.eot, .svg, .ttf, .woff y stylesheet.css)

Una vez los tengas en tu PC, vas a ir a Dropbox y entras la carpeta pública que aparece como "Public". Allí le vas a dar al ícono para cargar archivos y vas a subir sólo .eot, .svg, .ttf, .woff (la stylesheet no!)

Cuando hayan terminado de subirse, vas a hacer clic con el botón derecho sobre cada uno de ellos y vas a seleccionar la opción "Copiar vínculo público" y pegalos por un momento en un bloc de notas o algo. Hazlo con los 4 archivos.

3. Editando el código @font-face

Ahora vas a abrir en tu PC el archivo restante: stylesheet.css que también se abre en un bloc de notas. Y ahora, ¡atención! Vas a tener que reemplazar lo que está en rojo por cada uno de los links que acabas de copiar.

¡Ojo! Que deben coincidir las terminaciones (.eot, .ttf, etc) que aparecen en el stylesheet con el link que reemplacen. ¿Me explico?

4. Incluyendo el código @font-face en tu plantilla

Vas a ir a tu escritorio en Blogger Plantilla > Edición HTML. Allí busca la línea 10 y haz clic en la flechita negra que aparece al costado.

Luego haz clic en la ventana del código, aprieta CTRL + F y busca </b:skin>, justo por encima de eso, vas a copiar y pegar el código que modificamos antes.

¡Y voilá! Ya tienes la fuente instalada en tu código. Ahora...

¿Cómo utilizarla en cualquier parte de la plantilla?

La fuente puede ser utilizada donde quieras, en el título de las entradas, en los gadgets, etc. Para hacerlo, en la primera línea del código que acabas de pegar pone el nombre de la fuente entre comillas simples ' ': font-family: 'art_breweryregular';

Tienes que copiar ese nombre y después pegarla en donde la quieras utilizar. Por ejemplo, si la quieres utilizar en el título de las entradas, vas al código de tu blog y buscas: h3.post-title

Inmediatamente debajo pone esto: font: $(post.title.font);

Entonces vas a reemplazar $(post.title.font) por el nombre de tu fuente, en mi caso levirebrushedregular

¡Y ya está! Todo depende del lugar en que quieras utilizar, obviamente. Si quieres utilizarla en algun lugar en particular de tu blog, pero no sabes cuál es la línea de código que debes buscar, dejame un comentario y te digo!

Si algo no te salió o te trabaste, no dudes en dejarme un comentario. Pero recuerden que es muy importante prestar mucha atención a cada paso. No es un tutorial del todo fácil, porque el HTML no es fácil para nadie y como digo siempre, borrar una coma o un corchete puede implicar una catástrofe. Puede que la primera vez no te salga, pero vuelve a intentarlo, cuando lo entiendas bien, verás que lo haces en un abrir y cerrar de ojos!

Espero que les sirva y que lo pongan en práctica, nos leemos en el próximo tutorial!