En este tutorial, te mostraré cómo cargar cualquier fuente Web de Google a tu blog de Blogger. Hay algunas maneras de hacer esto, pero así es como lo hago.
Este tutorial es el más adecuado para aquellos que tienen algún conocimiento de CSS. Para este tutorial estoy usando la plantilla «Simple» de Blogger.
Este es un ejemplo de una fuente web personalizada de Google instalada en nuestra plantilla de Lemon Macaron.
Paso 1
Antes de comenzar, siempre recomiendo hacer una copia de seguridad de su plantilla actual antes de realizar cualquier cambio (por si algo sale mal).
Puede hacer esto en su panel de control yendo a Plantilla > Copia de seguridad/restauración (ubicada en la esquina superior derecha) > Descargar plantilla completa.
Paso 2
Después de hacer una copia de seguridad de su plantilla, haga clic en Editar HTML (todavía estamos en la pestaña «Plantilla»).
Paso 3
Al dejar esta página abierta, abra una nueva pestaña o ventana y diríjase al sitio web de Google Web Fonts. Busque la fuente que desea utilizar y seleccione Uso rápido.
He elegido usar la fuente «Langosta Dos».
Paso 4
Para la Sección 1: Elija los estilos que desee, elija los estilos que desee disponibles para su fuente (puede seleccionar varios estilos). Ten en cuenta que seleccionar demasiados estilos puede ralentizar tu blog. He seleccionado Normal 400 como se puede ver a continuación.
Para la sección 3: Agregue este código a su sitio web, haga clic en la pestaña @importar.
Paso 5
Copie la información en el cuadro @ importar.
Ahora, dejando esta página abierta, vuelve a tu blog (donde seleccionaste Editar HTML). Vamos a pegar el código de importación de fuente en tu plantilla.
Busque el siguiente texto ubicado al principio del editor de plantillas (generalmente ubicado en las líneas 13 o 14):
<b:skin>...</b:skin>
Una vez expandido, pegue la información que copió del cuadro @import en el sitio web de Google Web Fonts, el siguiente texto:
/* Variable definitions
Debería verse así.:
Haga clic en guardar plantilla. ¡Tu fuente ha sido importada! Ahora puede colocar la familia de fuentes donde desee que se muestre en su plantilla.
Paso 6
Rápidamente, le mostraré cómo usar su fuente recién importada. En este ejemplo, usaré la fuente para el título de mi publicación. En el editor HTML buscar:
h3.post-title, .comments h4
Eliminar la siguiente línea:
font: $(post.title.font);
y reemplácelo con el texto que se muestra en la Sección 4: Integre las fuentes en su CSS en el sitio web de Google Web Fonts.
font-family: 'Lobster Two', cursive;
Debería verse algo como esto una vez que haya pegado la información de la familia de fuentes:
