9/19/2012

Cambiar el tipo de letra en Blogger


Aún cuando uno use plantillas personalizadas que no pertenecen al nuevo sistema de diseño de Blogger, instalar nuevas fuentes es tremendamente sencillo, simplemente hay que ir a la página específica de cada fuente de letras, copiar un código y pegarlo en nuestra plantilla. Es un simple copy-paste, que debemos realizar tan solo una sola vez por cada fuente que queramos añadir.

Para seleccionar la nueva fuente

El primer paso será visitar el directorio de fuentes de Google y elegir la fuente que más nos guste. Podemos verlas en forma previa y elegir la que más nos llame la atención, incluso podemos ir eligiendo varias si no nos conformamos sólo con una y queremos utilizar un tipo de fuente distinto dependiendo de la situación, del post, de si es en un widget, etc…

 http://www.google.com/webfonts

Tomar la fuente

Una vez nos hayamos decidido por una en particular (o varias, pero centrémonos en cómo conseguir una), tendremos que guardar el nombre exacto de la fuente para poder utilizarla luego bien.

Instalar la fuente en nuestra plantilla

Recuerda que antes de cualquier modificación debes guardar una copia de tu plantilla por si algo sale mal.
Con el código de la fuente ya copiado nos dirigimos al panel de control del blog y vamos a Diseño – Edición de HTML y con Ctrl-F buscamos el código.
<head>
Localizada esa parte pegaremos justo abajo el siguiente código agregando en la zona marcada en rojo el nombre de la fuente que hemos elegido y guardaremos los cambios. (en el ejemplo la fuente es Oswald)

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Utilizar la fuente

Cuando queramos utilizar la fuente, ya sea en posts, widgets, etc… tendremos que buscar donde se ha definido el estilo de letra y anteponer la que hemos instalado. Por ejemplo:

Si instalaste la fuente Oswald, habrás puesto un código similar a este:

<head>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Para que funcione en los títulos de tus post deberás encontrar por ejemplo el siguiente código u otro similar de tu plantilla:

h2 {
  margin:0 0 10px;
  font:20px Arial, georgia, times, 'times new roman', serif;
  font-weight: normal;
  text-shadow: 1px 1px 1px #505050;
  line-height: 1.4em;
  text-transform:none;
  letter-spacing:0em;
  color:#000;
  padding:5px 10px;
}

Y agregar tu nueva fuente como principal

h2 {
  margin:0 0 10px;
  font:20px Oswald, Arial, georgia, times, 'times new roman', serif;
  font-weight: normal;
  text-shadow: 1px 1px 1px #505050;
  line-height: 1.4em;
  text-transform:none;
  letter-spacing:0em;
  color:#000;
  padding:5px 10px;
}

De esta forma si no llegara a estar disponible la api de la fuente Oswald se usaría la siguiente en orden de prioridades (aquí Arial)

Puedes modificar de esta forma cualquier área donde se use un tipo de letra o font.

Guarda los cambios y disfruta del nuevo diseño.

28 comentarios:

  1. Yo he visto esta letra por más sitios, me gusta¡

    ResponderEliminar
  2. Esos sitios no deben ser buenos lugares amiga. Lo mejor está aquí ;)

    ResponderEliminar
  3. puf, he pasado por mil blogs para inentar cambiar mi letra (porque desde el diseño no me deja) y lo he intentado hacer modificando el html pero tampoco ocurre nada! :'(

    ResponderEliminar
    Respuestas
    1. Marilyns, seguramente algún cambio has hecho ya que tu plantilla es original de blogger y las letras están cambiadas ;)
      Al ser una plantilla original te debería ser muy fácil modificarla con las herramientas de Blogger.
      Si este post tampoco te ha sido de ayuda, seguramente estás cambiando algo que no corresponde. Tu pregunta no molesta

      Cariños.

      Eliminar
  4. Hola! Si que he podido sin problema, está muy fácil explicado!
    Muchas gracias!
    Un saludo!

    Carlos Fuentes

    ResponderEliminar
    Respuestas
    1. Me alegra que pueda disfrutarlo.

      Un abrazo

      Eliminar
  5. Hola!! interesantísimo tuto!! lo malo en mi caso es que quiero una tipografía muy concreta que en el enlace que das de google no aparece, asi que opté por hacer uso de las que aparecen en la plantilla.

    Quería saber como haces los botones de sustitución que en el caso de blogger son páginas y como colocar enlaces a mis redes sociales desde cada post del blo y si estos últimos se pueden personalizar.

    Sería de gran ayuda tu respuesta. Gracias por tu blog y aportes! ya me hice fan de este blogger.Saludos!

    ResponderEliminar
    Respuestas
    1. MC Chueco. Con el tema de la tipografía creo que Blogger da tantas opciones que alguna debe ser la apropiada, pero seguramente usted sabrá mejor lo que pretende.

      Los botones de sustitución del menú no son páginas estáticas y son obra de Sora Templates. Simplemente puedes copiar el código desde la plantilla.

      Los botones de redes sociales (si no quieres usar los de Blogger) que más se usan son los de Add This (http://www.addthis.com/) o los de Lockerz (http://share.lockerz.com/)

      También hay otros muy bonitos que se pueden incluir uno por uno dentro de la plantilla.

      Son tantas las posibilidades que no he pensado en hacer un post sobre el tema, pero tal vez incluya alguno que indique como he instalado los últimos que me han gustado.


      Paciencia (o)

      Un abrazo.

      Eliminar
  6. Gracias por el tutorial
    Un saludo

    ResponderEliminar
    Respuestas
    1. Gracias por dejar tu mensaje. :)

      saludos

      Eliminar
  7. Anónimo6/12/2013

    Hola OPin, he seguido todos los pasos pero me salta un error cuando trato de guardar la plantilla: Error al analizar XML, línea 738, columna 5: The element type "link" must be terminated by the matching end-tag "< / link > ".
    ¿Qué debo hacer?
    Muchas gracias por el tutorial, espero tu respuesta :)

    ResponderEliminar
    Respuestas
    1. Estimado Anónimo (es una pena que teniendo cuenta Blogger figures como anónimo porque no puedo ver tu blog) debo adivinar que no estas siguiendo correctamente las indicaciones. Por empezar la línea 738 está muy lejos de localizarse bajo la etiqueta HEAD mucho más cercana a la línea 5 o 9 bien al comienzo de la plantilla.
      Ten en cuenta que es un truco muy probado y que no da inconvenientes. Simplemente sigue las instrucciones todo saldrá bien.

      Un abrazo y suerte.

      Eliminar
  8. Hola de nuevo OPin, soy la autora del anterior comentario que por un equivocación no publiqué el comentario con mi cuenta.
    Es extraño ese error, porque tal y como mencionas introduzco el link a la fuente en la línea 5, puesto que en la 4 está la etiqueta < head >, pero al tratar de guardar la plantilla me salta ese error. Quizá tenga algo que ver con que en la línea 738 es donde se cierra < /head >. No tengo demasiada soltura con HTML, y prácticamente funciono a base de ensayo-error, pero esto de las fuentes me tiene desesperada. La fuente que trato de poner es la Sue Ellen Francisco, por si esa información puede ayudar.
    Muchas gracias por tu interés, un saludo!

    ResponderEliminar
    Respuestas
    1. Hola Señorita indecisa. He tratado de localizar tu plantilla que según los datos que figuran dentro se llama Student y es de Lecca. Pensé en bajarla y cargarla para verificar que no contenga un error, pero no la encuentro. Si me pasas el link de donde la has tomado podré cargarla y ver cual puede llegar a ser el desperfecto.
      Tal vez tengamos suerte :-d

      Eliminar
  9. Una vez más te agradezco el interés. Este es el link de donde lo descargué http://btemplates.com/2010/blogger-template-estudante/

    Ojalá podamos solucionarlo, muchas gracias!!

    ResponderEliminar
    Respuestas
    1. Probablemente no te agrade mi respuesta pero si bien esta plantilla me ha dado trabajo para instalarla, lo he logrado y he podido hacer todo con normalidad. Puedes ver el resultado en

      http://bl065.blogspot.com.ar/

      donde he puesto la fuente Oswald tal como se indica en el post.

      Sin embargo, desde el cambio de editor es frecuente tener problemas para recargar algunos tipos de plantillas. Creo que esta puede ser una de ellas.
      Antes de seguir creando tu blog te recomiendo ver si puedes recargar los backup de tus trabajos. Si te presenta problemas te recomendaría que busques una plantilla de alguna fuente más confiable o que uses las plantillas de Blogger y apliques la decoración que ya tienes con tus imágenes.
      Así tendrás un blog 100% confiable de blogger con las imágenes que te gustan.

      Lamentablemente no puede ayudarte más pues la falla no me ha aparecido.

      Cariños.

      Eliminar
  10. Te agradezco mucho tu interés y el tiempo que has gastado en tratar de ayudarme. Probablemente haga lo que dijiste, intentarlo sobre una plantilla de blogger.
    Muchas gracias de nuevo, seguiré pasando por este blog ;)
    Un saludo!

    ResponderEliminar
    Respuestas
    1. Espero que tengas mucho éxito con tu blog. Si usas una plantilla Blogger podrás hacer todos los cambios desde el editor de Blogger y te quedará hermoso.

      Suerte.

      Eliminar
  11. Gracias por tu ayuda para cambiar la letra de mis entradas, lamentando mucho no haber podido hacerla en el título, pero veré después como hacerlo, en realidad no encontré los códigos como tu explicas, de todas maneras gracias mil.

    ResponderEliminar
    Respuestas
    1. No recuerdo haber respondido algo en especial , pero tampoco puedo ver tu blog como para ver si puedo ayudarte un poco más.
      Estoy seguro que lo lograrás con empeño.

      Eliminar
  12. Hola opin muy bueno tu post, pero tengo un problema no puedo encontrar el directorio de fuentes de google en qué parte exacta está?

    ResponderEliminar
    Respuestas
    1. Si lees desde el principio el post verás una línea que cambia de color cuando pasas el cursor del ratón por sobre ella. La misma es:

      http://www.google.com/webfonts

      Allí elijes la que te gusta y copias el nombre en el código que he dejado.

      Suerte.

      Eliminar
  13. Rubén P.2/13/2014

    Muchas gracias. Aunque ha sido un poco lioso modificar el código de mi plantilla, tras un rato de deducción está conseguido. Muchas gracias por el post. Y lo mejor de todo es que antes de leerlo mi motivo era que quería cambiar a la fuente Oswald!

    ResponderEliminar
  14. Hola, la verdad es que no he logrado comprender como modifico el tipo de fuente especificamente de las entradas de mi blog. Ya todo lo demás lo pude modificar. Si me puedes ayudar te lo agradezco :)

    ResponderEliminar
    Respuestas
    1. Cada plantilla es un mundo aparte. Si usas las plantillas de Blogger puedes modificar las fuentes desde el editor de manera muy simple. Si usas plantillas de diseñadores externos debrás buscar la declaración de Font family que le corresponde al Post content.
      Lo mejor será que pruebes modificando el font en los lugares donde se asocie la palabra Post y ver cual es la cumple con tus espectativas.

      Suerte

      Eliminar
  15. Completamente de acuerdo cada plantilla de blogger es totalmente diferente que otra plantilla asi que lo mas recomendable es siempre hacer una copia de seguridad de la plantilla antes de modificarlo.

    ResponderEliminar
  16. Excelente Post.. Yo utilizo mayormente Verdana y se ve bien , este es mi Blog http://computacionamil.blogspot.cl/ Saludos.

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.