FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Cómo poner fuentes personalizadas en Blogger

22 feb. 2014
¿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!

7 comentarios :

  1. Podrias subir un code base para wordpress?

    ResponderEliminar
    Respuestas
    1. Tengo uno pero no es mío (lo descargué de otra página) así que no lo voy a subir, pero como la página ya cerró si queres te lo paso... sólo que por md en twitter o por mail :) Si te interesa, avisame y te lo mando!

      Eliminar
    2. si porfaa pasamelo por mail arena_amy@hotmail.com

      Eliminar
  2. Respuestas
    1. Qué quieres aprender a hacer en Photoscape? La verdad no es un programa que haya explorado en profundidad, so no lo manejo al 100%. Pero si me decis, que tutorial queres aprender, tal vez puedo hacerlo :)

      Eliminar
  3. Cataaa, tengo un problema. Cuando subo los archivos, se suben bien, pero no me sale la opción "Copiar vínculo público" solo las opciones de "Descargar, eliminar, mover y Copiar" nada más :l ¿Sabes porqué puede ser eso?
    Muchas gracias, besos!

    ResponderEliminar
    Respuestas
    1. Estas haciendo clic derecho, no? Puede ser porque tenes más de un archivo seleccionado! A mí me pasó la primera vez que lo hice jajajaj, y si no, la verdad no se por qué puede ser :/ Ojalá sea eso.

      Eliminar