Usar las fuentes previamente instaladas

2/2/15

Si en esta entrada os enseñaba cómo instalar nuevas fuentes, ya va siendo hora de que os diga qué tenéis que hacer para ponerlas en el lugar que queráis. 

Es cierto que siempre encontramos los tutoriales de cómo instalarlas, pero nunca se nos especifica cómo ponerla en el título de las entradas, en el cuerpo de estas, en la sidebar... Es algo que todos los que hacemos ese tipo de tutoriales, solemos dar por hecho que se puede saber, pero que no necesariamente se sabe.

En esta entrada os enseñaré cómo hacer que se vean esas fuentes que habéis instalado, en los lugares más comunes de vuestro blog.

En primer lugar, debéis tener en cuenta que la fuente debe ir tras font-family: o font:, por lo que cada vez que veáis esto, significará que ahí podéis poner el nombre de vuestra fuente ya instalada. Sin embargo, vamos a ver cómo poner la fuente en sitios más concretos:

+Título de las entradas

Para que vuestra fuente nueva sea visible en el título de cada entrada, tendréis que buscar h3.post-title, h4 { y a continuación de esto, buscar el font-family: o font: que se encontraráe antes del cierre. Por ejemplo, en una plantilla simple lo encontraríamos así: 
h3.post-title, .comments h4 {
font: $(post.title.font);
margin: .75em 0 0;
}
Entonces no tendríamos más que poner el nombre de la fuente en lugar de lo que está en rojo.

+Título de los widgets

Si lo único que queréis cambiar es el título de los widgets de la sidebar, tenéis que pegar antes de ]]></b:skin> el siguiente código:

.sidebar h2 {
color: #000;
background: transparent;
text-align: center;
font-family: NOMBRE DE TU FUENTE;
font-size: 11px;
}

Y ya sólo os queda poner el nombre de vuestra fuente en lugar de lo que está en rojo.

 

+Menú

Para los que uséis este menú que os enseñé hace unos días, tenéis que buscar lo mismo, font: que lo encontraréis justo al principio:
<style type='text/css'>
#chromemenu{
width: 97%;
font: 11px Tahoma,Geneva,sans-serif;
font-weight: normal;
letter-spacing: 3px;
text-transform: uppercase;
background: #fff;
margin-bottom: 35px;
border-bottom: 1px solid #dcdcdc;
}
De nuevo, deberás poner el nombre de la fuente que has instalado en lugar de lo que está en rojo.


+Cuerpo de las entradas

Aquí no os recomiendo que pongáis una fuente que hayáis instalado, ya que esto puede ralentizar la carga de la página, pero para aquellos que vivís al límite, tendréis que buscar .post-body { y antes del cierre (}), en font: o  font-family:, poner la fuente. Si no lo encontráis, podéis añadirlo vosotros mismos.

Bueno, esto es todo, creo que son los sitios en los que más queremos cambiar las fuentes que ya nos trae Blogger. Si queréis instalarla en algún sitio que no he mencionado y no sabéis cómo hacerlo, escribidme un correo e intentaremos solucionarlo lo antes posible.

10 comentarios:

  1. kdsjlsñadjfklñsadfjdklsñjadsklñfjds ESTO ERAAAA. ¡Eres un genio! Lo probaré en cuanto pueda <33333

    ResponderEliminar
    Respuestas
    1. ¡Genial! Me alegra que te sirva de ayuda :D

      Eliminar
  2. No tenia ni idea de que la fuente del post-body podía ralentizar la carga de la página O.o. Lo tendré en cuenta!
    ¡Besotes :D!

    ResponderEliminar
    Respuestas
    1. Siempre he tenido entendido eso, quizá no tanto como una foto grande, pero yo prefiero curarme en salud. Lo noto sobre todo en un portátil que tengo chiquitito con las fuentes de los títulos, tardan en cargarme.

      ¡Besos!

      Eliminar
  3. ¡Genial! Justo estoy aprendiendo a diseñar plantillas de Blogger, y esta exolicación tan clara me viene muy bien. Haces que parezca hasta fácil. ¡Muchas gracias por este post!

    ResponderEliminar
    Respuestas
    1. ¡Es fácil! :D Gracias a ti por pasarte :)

      Eliminar
  4. Muy buen tutorial. No sabía que personalizar la fuente del cuerpo de las entradas ralentizaba la carga de la página. ¡Gracias por el dato! Saludos :)

    ResponderEliminar
    Respuestas
    1. Lo he comprobado con un portátil pequeño que tengo y de recursos muy limitados, la fuente de los títulos (es la que tengo instalada), tarda un ratillo en cargarme. Casi me da algo la primera vez que lo vi xD

      Eliminar
  5. Llevaba tiempo buscando un tutorial así y ahora mismo te pondría una estatua por aclarar tantas dudas. Parece tan simple cuando lo explicas que dan ganas de ponerse a trastear con ello ya mismo. ¡Muchísimas gracias!

    (He instalado tu diseño en mi blog. Lo pagué con la cuenta de twitter que iba a usar en principio para él pero cambié de opinión sobre la cuenta a última hora y ahora uso otra. ¿Supone algún problema? Los créditos están bien señalados, por supuesto, y en ningún momento he modificado el diseño -que es precioso- más allá de rellenar las secciones :)

    ResponderEliminar
    Respuestas
    1. ¡Hola! Muchísimas gracias, me alegro un montón de que sirva de ayuda lo que pongo por aquí :D

      No te preocupes por lo de pagar con un tweet, mientras la plantilla lleve los créditos, no hay problema alguno.

      ¡Besos!

      Eliminar

No está permitido en este blog dejar enlaces en los comentarios. Tu nick es un enlace directo a tu perfil, donde si queremos, podemos visitar tu blog.

Somos librófagos, pero si haces spam también te comeremos.

En caso de no cumplir con esta norma, tu comentario será dirigido directamente a la carpeta SPAM.

¿Colaboramos?
Estudio
Galería
Mery's Notebook © Todos los derechos reservados