10 jun. 2016

Cómo instalar fuentes en Blogger paso a paso + IMPRIMIBLE GRATIS

  • 12:23
  • por
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. Por ello instalar fuentes en Blogger es algo que debemos aprender a realizar si queremos que el diseño sea armónico y a nuestro completo gusto.


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.




Si quieres tener un blog renovado, bonito, elegante y profesional en 2 días, echa un ojo al servicio estrella que llevo a cabo con el que todos mis clientes están 100% satisfechos.






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.

  ACTUALIZACIÓN:     Entre zkreations y yo hemos querido crear una nueva forma de instalar fuentes, mucho más atractiva. Lo que vas a poder hacer es instalar en Blogger cualquier fuente que hayas descargado (con licencia de uso personal, o gratuita). ¡Como lo oyes! Hasta ahora no existía un tutorial sobre esto que realmente funcionara, así que aquí lo tienes, con video tutorial incluído.


Instalar fuentes externas o personalizadas en Blogger

Para esta opción, una de las más reveladoras del momento, contamos con la colaboración de Dani de zkreations, que ha desarrollado el tutorial. ¿Sabes que no existe un tutorial acutalizado para lograr este propósito de instalar la fuente que quieras en Blogger? Pues por eso Dani y yo hemos querido crearlo y ponértelo super fácil. Con los conocimientos avanzados y profesionales de zkreations y mi dinamismo para explicar los tutoriales aquí te mostramos una forma super fácil para poder usar en tu blog el tipo de letra que más te guste.

Si quieres tipografías bonitas puedes echar un ojo al post 15 Tipografías bonitas de uso libre y personal + Instalacion

Aquí te dejo el tutorial paso a paso de zkreations para instalar fuentes web en blogger de forma gratis sin necesidad de hosting (el hosting es un lugar en Internet donde puedes alojar, guardar, webs, documentos o archivos, de tu propiedad para que luego de realizar ciertos pasos en código, puedas usarlos en tu blog. Blogger está alojdo en el servidor de Google, por ejemplo. En el caso de Wordpress.org necesitas comprar un hosting propio, donde puedas alojar Wordpress.org, es otro ejemplo) 

Tienes que ver el vídeo junto a su tutorial para que no cometas ningún error. ¡Ánimo! Podrás usar la fuente que quieras en tu blog!!

Cualquier duda nos dejas en comentarios.








Instalar fuentes de Google Fonts en Blogger


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 para ir al post y conocer distintas ideas para usarlo. Para descargarlo puedes usar los botones debajo de la imagen a continuación.


¡Espero que te gusten!







Descargar en color

Descargar blanco y negro


Mónica Lemos

Me apasiona la educación, en su sentido más amplio. Son muchos mis centros de interés, por ello creo que ser Blogger o Youtuber es una oportunidad de compartir lo mejor de cada persona al mundo. Mientras estoy intentando evolucionar 'educadamente' en esta 'loca' sociedad. Desde este rincón puedo ayudarte con asesorías y servicios ¿Te animas?

Comenta dudas, opiniones...



Ya han comentado 6 veces:

  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
  3. Lo siento, pero la verdad no me ha servido de nada, he intentado con varios tutoriales de esto y nada, ya no sé que hacer

    ResponderEliminar
    Respuestas
    1. Solo puedo decirte que intentes de nuevo con cuidado y paso a paso...
      Otra cosa que puedo ofrecerte es mi servicio técnico por el que te cobraría 10€ más iva.

      Ánimo a veces fallan detalles pequeños.

      Un saludo!!

      Eliminar