El mejorar la apariencia de nuestro Blog es importante ya que ayuda a captar la atención de los usuarios. Algo importante son los tipos de letras que usamos en nuestro blog. Al usar un estilo de letra o un tipo de fuente diferente al usual creamos un estilo, mejorando el impacto que trendra nuestro blog.
Otro caso que suele pasar es cuando estamos navegando por un blog y de repente nos cuesta un poco leer los artículos, al final no entendemos nada y salimos del blog. Esto sucede por el tipo de letra que se usa en el blog, por eso es importante usar tipos o fuentes de letras claras y que sean armónicos al estilo de nuestro blog.
Seguramente se deben de estar preguntando como cambiar el tipo de letra en blogger, pues gracias a Google Fonts tenemos la capacidad de usar diferentes letras bonitas ya que nos permite instalar fuentes completamente gratis.
Instalar tipos de letras en Blogger
Ingresamos a la pagina principal de Google fonts y buscamos alguna fuente de letra que nos guste. Luego presionamos sobre el símbolo de suma (+) para seleccionarlo:
Es importante no usar muchas tipografías ya que esto puede afectar en la carga de nuestro blog. Yo recomiendo usar como máximo dos tipos de letras.
Luego de agregar las fuentes de letras nos aparecerá una pequeña ventana en la parte inferior derecha. En esa ventana veremos dos pestañas: Embed y Customize. En la segunda pestaña podremos seleccionar el grosor y estilo de la letra, es decir bold, regular, cursiva, entre otras. Recomiendo seleccionar máximo dos estilos.
Una vez seleccionado el estilo de la letra, nos vamos a la pestaña Embed en donde encontraremos los métodos de instalar la fuente en nuestro blog. La que usaremos será la Standard. Copiamos la etiqueta que aparece.
Ahora nos vamos a nuestro panel de administración de Blogger y entramos a Tema > Editar HTML y pegamos el código debajo de la etiqueta <head>.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
De esa forma evitamos el error en Blogger y nos permitirá guardar los cambios. Esto se debe a que Blogger utiliza xml estricto, por ello es obligatorio cerrar todas las etiquetas.
Error al instalar tipos de letras en Blogger
En muchos casos cuando queremos instalar tipo de letra en Blogger nos da error, esto puede pasar por muchos motivos pero el más conocido es el error "The reference to entity "display" must end with the ';' delimiter" o algo similar.
Este error en Blogger sucede porque esta plataforma se basa en XML, que es más estricto que HTML. Esto se puede resumir que en Blogger no podemos usar algunos caracteres especiales.
La solución al error de instalar tipos de letras en Blogger es la siguiente. Primero debemos de identificar si la etiqueta link, que nos genero Google Fonts, tiene el siguiente caracter &.
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
Una vez identificado el caracter tenemos que reemplazarlo por lo siguiente &. Luego de hacer este pequeño cambio el código quedaría parecido al siguiente:
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet"/>
Usar el tipo de letra en Blogger
Para poder usar la tipografía en nuestro blog debemos usar la propiedad font-family que nos brinda la propia herramienta de Google Font y agregarla a cualquier selector en CSS.
A continuación te dejo dos ejemplos de como usarlos correctamente. En ambos casos solo tenemos que reemplazar la propiedad font-family completa por la que nos da Google Font.
Cambiar tipo de letra de todo el Blog
body {
font-family: 'Roboto', sans-serif;
}
Cambiar tipo de letra de todos los Títulos
h1, h2, h3, h4, h5 {
font-family: 'Roboto', sans-serif;
}
Yo no pude agregar ninguna de estas fuentes a blogger, a menos que le saque el parámetro "&display=swap". Es una lástima porque esa propiedad permite que se muestre el texto antes de que se cargue la fuente, haciendo más rápida la carga del blog.
ResponderBorrarHola Javier, prueba a reemplazar el simbolo & por lo siguiente & a m p ; pero sin los espacios para permitir el parámetro display.
BorrarHola! Seguí el tutorial y al cambiar la family font no hay problema, pero para poner la liga debajo de head me aparece esto: Se ha producido un error al analizar el XML, línea 5, columna 71: The entity "display" was referenced, but not declared. Qué pasa?
ResponderBorrarGracias!
Hola Brown eyes, este es un error muy común que pasa al instalar tipografías en Blogger. Para solucionarlo puedes revisar la actualización que hicimos en este mis artículoa Error al instalar tipos de letras en Blogger. Un saludo.
BorrarEstaba buscando por todas partes cómo solucionar el error que me daba. Tu me lo has despejado y ya está listo funcionando. Muy agradecido
ResponderBorrarGRACIAS ENSERIO
ResponderBorrar