instalar fuentes a mi blog usando google fonts

Instalar fuentes al Blog usando Google Fonts

APRENDE ✦ a Instalar Fuentes de Google Fonts en Blogger. También doy【Solución】al Error al analizar XML ⛔ The reference to entity “display” ✔ Y mucho más.

¡Hola! Bienvenido a Peengler, soy Gabriela. Esta vez voy a explicarte sobre como instalar una fuente usando Google Fonts en el título de tu post. Si puedes lograr cambiar la fuente en tus títulos puedes cambiarlo en tu párrafo o en cualquier parte de tu blog.

Además explico como solucionar 2 posibles problemas que pueden ocurrir.


Sigueme en:

Pero antes de instalar cualquier fuente linda y llamativa debes saber lo siguiente:

¿Qué es una fuente?

Las fuentes son archivos con información vectorizada que comprenden un conjunto de modelos (letras y signos) en base al diseño de la letra. Las extensiones más populares que usan las fuentes son: TrueType (.ttf) y OpenType (.otf).

Diferencia entre TrueType (.ttf) y OpenType (.otf).

TrueType (.ttf): permiten un máximo de 256 glifos (caracteres).

OpenType (.otf): permiten contener hasta 65.636 glifos, Es decir, posee más caracteres dentro de la misma fuente.

En pocas palabras: OTF posee un paquete más completo que el TTF.

Recomiendo: las fuentes OpenType (.otf) para que no tengas problemas con los símbolos de nuestro idioma “español” como: la “ñ”, viñetas y entre otros.

Cómo Instalar fuentes al Blog usando Google fonts

Primero debes ir a Google Fonts, te saldrá algo así:

fuentes de google fonts

Lo que más me gusta de esta página, es que puedes ir probando como se ve tu texto, borrando el texto del ejemplo y escribiendo el tuyo.

seleccionar una fuente de Google fonts

Una vez que encuentres la fuente ideal, la vas a seleccionar:

Añadir fuente de Google fonts

Vas a ver que se activa una ventana:

Ventana de la fuente en Google fonts

Le das clic y aparece algo como esto:

Instalar la fuente usando Google fonts

Explica que hay 2 maneras de instalar la fuente: STANDARD@IMPORT. En este caso usaremos STANDARD, copias el primer código (no cierres la ventana) y te vas a blog. Tema > Editar HTML

Tema editor de html blogger

Pegas el código después del <head> en mi caso lo colocare después del título del blog:

Añadir código de la fuente en blogger

Ahora falta llamar esa fuente a donde quieres que se vea. En mi caso será en el título del post. Para eso necesito saber cuál es el código que usa el título del post.

Así que me voy al blog.

Doy un clic derecho (en cualquier parte del blog) clic en inspeccionar elemento.

Inspeccionar imagen

Se muestra la consola, ¿Qué vas hacer?

  1. Clic a la flecha.
  2. Selecciona el título (o en donde quieres aplicar la fuente).
Usar la consola del navegador en blogger

Como vez, mi título es un h3, si coloco el cursor sobre el h3, me va a seleccionar el título y encima de este sale una línea de código y es la que voy añadir en mi CSS. (ANOTALO)

Ahora, te regresas a tu editor de HTML

Activas la caja de búsqueda con CTRL + F. Buscar: ]]></b:skin> Encima de este, escribes tu código. En mi caso, será para el título del post.

Escribo lo que me salió cuando use la consola, y abriendo y cerrando comillas y (dentro de ellas) voy a pegar la fuente.


h3.post-title.entry-title {

}

Nos regresamos a Google Font y copiamos el segundo código.

Añadir en CSS la fuente

Lo pegas dentro de los paréntesis, y quedara algo así.


h3.post-title.entry-title {

font-family: 'Anton', sans-serif;

}

Guardas los cambios

Y ahora sale un error.

Error al Instalar fuente de google en blogger, Error al analizar XML,, The reference to entity "display" must end with the ';' delimiter.

¿Qué sucede? ¿Que hice mal? ¿la fuente no sirve?

No es eso, lo que sucede es que nuestra plantilla usa el formato XML, por lo tanto, debemos adaptar las cosas a ese formato.

Solución al error: The reference to entity “display” must end with the ‘;’ delimiter. En Blogger

Nos regresamos al <head> donde copiamos el primer código.

Solo debes reemplazar el & por &amp;

Solución al error al Instalar la fuente de google fons en blogger

Guardas los cambios.

Ahora sale otro error (bendito XML)

Solución al error: The element type "link" must be terminated by the matching end-tag "</link>". En Blogger

Solución al error: The element type “link” must be terminated by the matching end-tag “</link>”. En Blogger

Dice que debemos cerrar el <link> añadiendo al final /

Quedaría entonces así:

Solución al error: The element type "link" must be terminated by the matching end-tag "</link>". En Blogger
Al final añades />

Guardas los cambios. Vas a tu blog, y listo.

Fuente instalada exitosamente en Blogger

¡Hay que festejar! Mi trabajo aquí ha terminado.

Pero, si por alguna razón, nada sucede intenta añadiendo: !important en tu CSS


h3.post-title.entry-title {

font-family: 'Anton', sans-serif !important;


}

Y si nada sucede, entonces el no es la clase que agregaste, es decir, lo que esta antes del paréntesis.

En conclusión:

Instalar Fuentes de Google Fonts en Blogger es una alternativa, existe otra que quizás lo explique más adelante. Recuerda usar una fuente que sea legible, lo que se quiere es que tus lectores puedan leer felizmente sin hacer mucho es fuerzo en la vista. Porque eso cansa, por supuesto el color y el tamaño juega un rol importante, así que elige los adecuados.

Si por alguna razón, no tuviste cambios al añadir una fuente, es necesario intentarlo muchas veces (de diferentes maneras) quizás sea la clase, o quizás sea la plantilla/tema.

¿Te gusto el post?
¡Compártelo!

Gabriela Laya

Me gusta mucho el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs. En mi tiempo libre me encanta Leer, aprender a usar nuevos programas, escuchar música y más :D
18 comentarios

Deja un comentario

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


Citu:

7 mayo 2020 a las 21:15

Uy gracias por el tutorial

Responder
Rocío:

8 mayo 2020 a las 03:56

Como siempre, da gusto aprender con tu blog. No tenía ni idea de que se podían usar otras fuentes que no fueran las predeterminadas de Blogger.
Un abrazo y muchas gracias.

Responder
Asunción Artal:

8 mayo 2020 a las 04:02

Realmente útil,muchísimas gracias

Responder
Maria Eugenia ARIAS LOZANO:

8 mayo 2020 a las 04:37

Uff lo del html me costó un huevo aprender a hacerlo, y luego ir a buscar y ver.., pero al tener un ingeniero informático en casa las cosas se hacen más fáciles, aunque no le doy yo mucha importancia al blog y lo cuido poco, la verdad sea dicha. Un besazo, buen día.

Responder
Miguel Pina:

8 mayo 2020 a las 05:55

Genial, Gabriela. Como te he comentado en alguna otra ocasión eres realmente una experta en Blogger y se agradece mucho que compartas tus conocimientos. Hoy en día los informáticos profesionales solo trabajan con WordPress y les suena a chino cuando les hablas de Blogger.
Un gran saludo!!

Responder
    Gabriela Laya
    Gabriela Laya:

    8 mayo 2020 a las 16:43

    En realidad siempre siento una barrera entre los que usan wordpress con Blogger mi idea es eliminar esa barrera XD

    Responder
yo leo Novela:

8 mayo 2020 a las 12:01

No solo me encantan tus consejos sino que me ayudan mucho. Gracias.

Responder
El desvan de vicensi:

8 mayo 2020 a las 13:20

Hay muchas para elegir pero como tu bien dices lo mejor es que tenga facilidad de lectura. Yo siempre pongo Arial, no me complico. Un beso y feliz finde 🌈🌈🌈

Responder
Joanna:

8 mayo 2020 a las 13:22

Muy interesante. Gracias por compartir.

Besos

Responder
Sakuya Aikawa:

8 mayo 2020 a las 14:41

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
Siempre tuve curiosidad de como se instalaban las fuentes de Google pero nunca me di el tiempo de hacerlo, yo las suelo cambiar directo del html de mi blog
pero esta entrada me la voy a guardar así que muchas gracias por compartirla 😀

Visita mi blog ♥ 穛 S4Ku SEK4i®

Responder
Yomi MR:

8 mayo 2020 a las 14:57

Holaa, a mí me encantó usar fuentes de Google porque se me hace una plataforma bastante sencilla, hay otras que me encantaría ponerle al blog pero no se entienden ja, ja, ja, nimodos.
¡Besos! :3

Responder
Marianna 2.0 (Mava):

8 mayo 2020 a las 23:18

Hola Gaby, excelente este tutorial, poquito a poco vamos aprendiendo, no tenía idea de que se podían utilizar fuentes adicionales a las ya predeterminadas de Blogger 😉
Gracias por compartir tus conocimientos con todos nosotros.
Un gran abrazo y feliz fin de semana

Responder
Serena Miles:

9 mayo 2020 a las 08:14

hola,
la verdad es que nos lo pones muy facil con tus explicaciones. A mi me gusta jugar con las fuentes en mis entradas, sobre todo para diferenciar las partes.
Gracias por la entrada
Besotessssssssssssssssss
@yanoquedanada

Responder
Celia | Miles de Libros:

9 mayo 2020 a las 10:32

¡Hola, hola!

Gran tutorial te has marcado, cuando quiera hacer algún cambio de letra ya se a donde acudir.

Mil besos,
Celia | 1000 LIBROS blog.

Responder
Nayade:

9 mayo 2020 a las 13:22

Hola ^^
Muchas gracias por la información bonita, me encantó la entrada, no sabía esto
un besazo ♥

– – El Mundo de Naya – –

Responder
Djangkaru Bumi:

11 mayo 2020 a las 04:34

Salam sukses selalu
I like
Nice artikel

Responder
Embrujo:

11 mayo 2020 a las 13:01

Holaaaaaa Peengler cielo me he perdido dentro de tu blog menos mal que al final encontré como regresar jajaja feliz tarde besitossssssss GRACIAS POR TUS EXPLICACIONES

Responder
Cecy:

12 mayo 2020 a las 15:15

Hola no tenia ni idea de que se pudiera cambiar la fuente el blog, muy útil la información, saludos

Responder

Recibe las últimas actualizaciones