como instalar fuentes en blogger

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

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 leyéndolo. 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! 🙂

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.

El diseño de nuestra Web, o nuestro blog, es muy importante para que nuestra audiencia se quede, vuelva, repita… Si no lo tenemos cuidado puede afectar de manera muy negativa.

La necesidad de personalizar nuestra web o 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 nuestra Identidad de Marca consta de alguna tipografía que no encontramos en la plataforma Blogger. 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.  

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.

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). ¡Cómo lo oyes! Hasta ahora no existía un tutorial sobre esto que realmente funcionara, así que aquí lo tienes, con video tutorial incluido.

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.

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 actualizado 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

¿Qué es un 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á alojado en el servidor de Google, por ejemplo. En el caso de WordPress.org necesitas comprar un hosting propio, donde puedas alojar tu WordPress.org, es otro ejemplo. Si quieres crear tu web paso a paso en WordPress de manera fácil y con todos los recursos necesarios (incluso plantillas ya preparadas y optimizadas) accede al curso que he creado.

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 la 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.  

  1. Vamos a la página de Google.com/fonts
  2. Elegimos las tipografías que nos gusten, y cuando veamos alguna que nos interesa de verdad
  3. Le damos al icono de “más”, 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.  

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

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).

instalar fuentes en Blogger paso a paso

Realmente en CUSTOMIZE te aconsejo seleccionar solo las clásicas: Bold (700) , Normal Italic (400)  y Normal (400)

  1. Una vez que las tenemos seleccionadas toca copiar el código que te facilita Google/fonts en EMBED font- STANDARD
  1. y ahora nos vamos al blog:  
  2. Tema
  3. Copia de seguridad (en los puntitos, luego en Copia de seguridad y luego Descargar)
crear copia de seguridad de plantilla en blogger
crear copia de seguridad de plantilla en blogger

  1. Buscamos en plantilla este código (si no sabes como mira este vídeo)
</head>
  1. y justo antes pegamos el código que hemos copiado en Google/fonts.

ATENCIÓ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   /

Ejemplo código original:

<link href=”https://fonts.googleapis.com/css?family=Roboto&display=swap” rel=”stylesheet”>

Ejemplo código para que funcione:

<link href=”https://fonts.googleapis.com/css?family=Roboto&display=swap” rel=”stylesheet”/>

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

Cambia las fuentes en Blogger

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 

  1. Buscar en tu plantilla HTML el siguiente código   (si no sabes cómo mira este vídeo aunque la visual es distinta se hace completamente igual)
.post-body {
  1.  y después pegar el código que google/fonts te comparte en ese apartado número 4 (imagen anterior)
  1. Guardar Plantilla y Ver blog.    

TRUCO

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 🙂

Regalo planificador descargable

Os comento que si os gustan los organizadores semanales he diseñado uno.

Para descargarlo puedes usar los botones debajo de la imagen a continuación.


¡Espero que te gusten!

Comparte

CONSIGUE

LA VIDA QUE DESEAS

GRACIAS A UN NEGOCIO ONLINE RENTABLE

Disfruta de mi curso gratuito “Cómo tener un Negocio Online Rentable no solo económicamente”, en el que comparto las áreas más importantes a trabajar para conseguir la vida que deseas con tu Emprendimiento Online.

Interacciones con los lectores

20 comentarios

  1. Tuttos Marie

    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

    • Mónica Lemos

      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!!

  2. Anónimo

    Cuando pego el código me aparece: "Error al analizar XML, línea 1005, columna 73: The reference to entity "display" must end with the ';' delimiter." y todos los códigos de diferentes fuentes tienen display en ellos, ¿Qué puedo hacer para solucionarlo?

  3. Guadalupe Maldonado Garcia

    Buenas noches Mónica.
    Estoy intentado poner la fuente Allure en mi blog. Lo hago tal cual dices tú, pero presenta algunos problemas, el primero es que no me sale buscador en la plantilla HTML, ni con control F ni nada, borré la caché como dijo una usuaria pero tampoco.
    Busco a ojo head, pero inmediatamente en la parte de arriba pongo el codigo corregido con la / pero me dice:
    Error al analizar XML, línea 1005, columna 71: The reference to entity “display” must end with the ‘;’ delimiter.
    Lo corrijo como dice y me sale el siguiente error
    Error al analizar XML, línea 1005, columna 72: The entity “display” was referenced, but not declared.
    que la verdad el error fue referenciado pero no declarado no se lo que es.
    Muchas Gracias de antemano, espero que puedas ayudarme . Recibe un cordial saludo

    • monicalemos

      Hola Guadalupe, es difícil resolver estos errores de esta manera Guadalupe. Solo identifico que eso de “busco a ojo head” no me parece adecuado, y que en toooodos los casos debe aparecer un buscador … ¡Ánimo! Espero que lo consigas.

  4. Rocío | A Heap of Books

    ¡Hola! Estoy intentando instalar mis fuentes, pero cada vez que pego el código tal y como tú dices, me sale esto: Error al analizar XML, línea 696, columna 64: The reference to entity “family” must end with the ‘;’ delimiter.

    He seguido tus clases paso a paso, así que no entiendo qué ha podido pasar.

    • monicalemos

      Hola Rocío, es probable que te falte algún código como el ; del final o que hayas escrito mal alguna cosa.
      ¡Ánimo! 🙂

  5. Desconocido Agradecido

    Está muy chulo, esto, porque para añadir fuentes chulas a Blogger no hay ni un vídeo, pero os tengo que pedir que lo actualizéis, porque al querer entrar a RawGit me salía una página en inglés diciéndome que la página sería próximamente cerrada (aunque ahora ya no funciona), así que si no es mucho pedir (lógicamente, quizás ahora no podéis hacerlo debido a la pandemia global del Coronavirus COVID-19), pero cuando podáis, por favor actualizad el vídeo porque realmente es muy útil, pero al haberse bloqueado la página te lleva de nuevo a GitHub, y no hay ningún vídeo para conseguir entender cómo se hace.
    Gracias,
    Desconocido Agradecido

  6. Antonio

    Hola Monica. Primero agradecerte por los aportes que realizas para nuestros blogs, son de gran ayuda y se valora eso. También quería avisarte que el enlace que te redirecciona al tutorial de zkreations, me aparece que la página ya no se encuentra disponible 🙁

  7. Angel Cordoba

    Hola, he encontrado el error que da el código que nos da Google, veo que hay varios comentarios que no han podido solucionarlo.

    Te he enviado por directo en Instagram para que lo puedas agregar al artículo y poder ayudar a estas personas.

    El post está muy bueno, me ayudo muchísimo, si quitamos que estuve dos horas buscando la solución a ese pequeño inconveniente jeje

    Muchas gracias por lo que aportas.

Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *