SLIDER

¡Hola!

Mónica Lemos
¡Hola! Soy Mónicay quiero que empieces a crear tu blog o tu canal de youtube sin complicaciones. Aquí descubrirás cómo.

CONSEGUIR LO QUE QUIERES

NUNCA FUÉ TAN FÁCIL

Si quieres conseguir ciertos cambios en tu blog, renovar el diseño, arreglar algún problema, instalar alguna plantilla que te crea problemas...¡Puedo ayudarte! Envíame un e-mail a contacto[email protected] y hablemos.

Suscríbete

¿Quieres asegurarte de que tus posts estén perfectos antes de ser publicados?
Te regalo una Check-List que te ayudará en esto.


Tutorial Blogger: Como instalar fuentes en Blogger

Tutorial Blogger: Como instalar fuentes en Blogger

Cuando nos paseamos por blogs nos damos cuenta al instante de lo cómodo, o incómodo, que nos resulta pasar un rato leyendo en cada blog. Quizás no nos preguntamos porqué, pero notamos que en ciertos blogs estamos más cómodas/os que en otros. Una de las razones principales es por el tipo de letra que se usa para redactar las entradas.

Inciso!! Al final del post hay regalo! :)

Obviamente no es el único punto importante, pero sí que es uno de los detalles imprescindibles a tener en cuenta

Digamos que si nos encontramos tipografías un tanto ilegibles y difíciles de entender, nos cansaremos visualmente y como no nos interese muchísimo la información, nos iremos pronto de ese blog

Pues eso mismo le ocurre a tus lectores/as así que debemos tener en cuenta esto , siempre, para elegir un tipo de letra para nuestro blog.

Blogger nos ofrece bastantes tipos de letra para usar en nuestro blog y en nuestras entradas, y ciertamente muchas de ellas nos servirían perfectamente para crear una fácil lectura y crear una redacción bonita. Pero a veces somos "culos inquietos" y queremos algo más de lo que Blogger nos ofrece, y eso está genial y es muy válido. Por eso hoy os traigo este tutorial, para que puedas elegir el tipo de letra que quieras para personalizar más todavía tu blog.

Estos tipos de letra que nos vamos a instalar, no solo sirven para nuestros post/entradas, si no que también los podemos usar en los títulos de entradas y sidebar (gadgets de la barra lateral) y esto es ya un punto y aparte en la personalización de nuestro blog porque es una forma importante de acentuar nuestro estilo y personalización.

Si ya conoces mi curso para crear y diseñar tu blog desde cero en varias clases podrás descubrir que tras instalar estas fuentes, podrás modificar tus fuentes donde aparezca lo siguiente;

font-family:

Ya que ese código es el que define el tipo de letra de aquel "apartado" o sección que queramos personalizar. Puedes usar estas tipografías en todos los lugares que quieras, simplemente añadiendo el CSS (código de estilo) que te proporciona la fuente que instales.

Vamos a empezar con la parte práctica ya, porque me podría pasar largo rato hablando sobre tipografías en tu blog, pero lo vamos a dejar para otro post.

     ACTUALIZACIÓN:     Google Fonts ha cambiado la interfaz de la página donde podemos conseguir los tipos de letra y por lo tanto he modificado el post para que sea realmente de utilidad, y también he eliminado el vídeo antiguo (no sirve para nada) y he creado uno nuevo.    


Te lo voy a explicar paso a paso, como de costumbre, y con un vídeo, así que no tengas miedo, vé paso a paso y quedará tal como quieres.

- Vamos a la página de Google.com/fonts

- Elegimos las tipografías que nos gusten, y cuando veamos alguna que nos interesa de verdad

- Le damos a  , pero te aconsejo no elegir demasiadas. 

Ya sabes que menos es más. Aunque al principio quizás quieras, o tengas, que probar varias, al final es mejor quedarse con las que realmente vas a usar, para no llenar la plantilla de código innecesario porque será perjudicial para nuestro blog.

Una vez que tengas tus tipografías elegidas vamos a darle a donde te muestro en la imagen, que está aquí, mira:



y entonces se despliega el lugar donde puedes elegir las variaciones de cada tipografía que puedes elegir en CUSTOMIZE (nº2 de la siguiente imagen), y los códigos que necesitamos en EMBED (nº1 de la siguiente imagen).



Realmente en CUSTOMIZE te aconsejo seleccionar solo las clásicas:

Bold (700) , Normal Italic (400)  y Normal (400)

Una vez que las tenemos seleccionadas toca copiar el código que te facilita Google/fonts en EMBED - STANDARD:

y ahora nos vamos al blog:

- Plantilla
- Copia de seguridad
- Buscamos en plantilla este código (si no sabes como mira este vídeo)

</head>
- y justo antes pegamos el código que hemos copiado en Google/fonts.

  / / /   A T E N C I Ó N   \ \ \   porque a ese código le falta algo para que funcione, antes de su carácter de cierre , osea este   >   tenemos que poner una barra como esta   /   y entonces sí que podemos darle a

- Guardar Plantilla y listo, ya podremos usar nuestros nuevos tipos de letra.


Cambia las fuentes en tu blog

Para poder usarlo como he dicho antes, podrás modificar las partes de tu plantilla donde encuentres

font-family:

y tendrás que poner el código que Google/fonts te facilita , nº 4 de la imagen que te he compartido más arriba.

Esos serán los códigos que tendrás que usar para modificar el tipo de letra de aquella parte de tu blog que prefieras. En mi caso aparecen 2 porque son las que he elegido, pero en tu caso aparecerán las que tu escogieras. 

  Un detalle a tener en cuenta   es que podrás cambiar la tipografía de todas tus entradas por defecto, pero dentro de ellas no tendrás una opción sencilla,  en el editor de entradas, donde puedas elegir tus tipografías, así que, quizás sea complejo en un mismo posts cambiar de tipografía varias veces. 

Para esto deberías entrar en la parte HTML de tu editor de entradas y cambiar la parte font-family: ... por aquella que hayas instalado de Google/fonts con el código del apartado 4 de la última imagen que te he compartido. No te lo recomiendo, más bien te recomiendo que crees un texto citado por defecto, con otro tipo de letra u otro estilo (CSS ya personalizado en tu plantilla, lo veremos en la clase número 13

Cambiar la tipografía de todas tus entradas 

Buscar en tu plantilla 

.post-body {


y después pegar el código que google/fonts te comparte en ese apartado número 4 (imagen anterior)

- Guardar Plantilla y Ver blog.


 / / /   I M P O R T A N T E \ \ \ T R U C O / / /  algunos tipos de letras parece no funcionar, el cambio de código no surge efecto y esto es debido a que existen tipos de letras que solo se componen de su nombre, sin nada después de la coma, como es el caso que he elegido en el vídeo. Elimina la coma y el problema estará resuelto. 

Te explico todo con detalle en el vídeo, para que no se te pase nada y te resulte todo más dinámico y sencillo :)




Espero que os haya gustado, creo que os encantará porque es muy útil este tutorial y seguro que ya teníais ganas. Además saber cómo solucionar esos problemillas e impedimentos que Google nos ha creado, nos ayuda a superar pequeñas frustraciones.

Por cierto que espero que me comentes algunas sugerencias para posts futuros, ya tengo unos cuantos preparados muy útiles gracias a vuestras sugerencias :)

Que paséis un finde estupendo!! Y por cierto,   EL REGALO  : os comento que si os gustan los organizadores semanales he diseñado uno en la colaboración que he empezado con Frikymama, dale click a la siguiente imagen para ir al post donde te lo puedes descargar! :)







4 comentarios

  1. Hola,

    Antetodo gracias por el gran trabajo que haces aportando infinidad de ideas para mejorar nuestros blogs. Y bueno que decir de este regalo, es magnífico.

    ResponderEliminar
    Respuestas
    1. AAyyy que no había contestado!! Muchas gracias!! son hermosas tus palabras!! :)

      Eliminar
  2. hola , queria preguntar que si esto cambia tambien los titulos de las entradas o como haria para cambiara las fuentes de todo, osea me explico , el titulo de las entradas, el texto, el titulos de lo gadgets y etc. Quiero cambiarlo ya que no me gustan las ue se encuentar en blogger a personalizar en tema

    ResponderEliminar
    Respuestas
    1. Hola Marie,
      aquí tienes todas las clases del curso, y en algunas tienes como modificar titulos y así:
      http://www.bloggerpasoapaso.com/p/curso-gratis-crea-un-blog-desde-cero.html
      En el menú en la pestaña CURSO GRATIS también tienes las clases.

      Espero que te sirva de ayuda! Un saludo!

      Eliminar

© Blogger Paso a Paso • Theme by Maira G. Adaptada por Mónica Lemos, autora de este blog.
Todas las imágenes son del banco de imágenes Unsplash.com o bien de mi propia autoría.
Si quieres puedes reclamar tu autoría - Contactar con la autora del blog.