En este tutorial, le mostraré cómo cargar cualquier fuente web de Google en su blog de Blogger. Hay algunas maneras de hacer esto, pero así es como lo hago.
Este tutorial es 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 Lemon Macaron.
Paso 1
Antes de comenzar, siempre recomiendo hacer una copia de seguridad de su plantilla actual antes de realizar cualquier cambio (en caso de que algo salga mal).
Puede hacer esto en su tablero yendo a Plantilla > Copia de seguridad/Restaurar (ubicado 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
Dejando 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 le gustaría usar y seleccione Uso rápido .
Elegí usar la fuente ‘Lobster Two’.
Paso 4
Para la Sección 1: elija los estilos que desee , elija los estilos que desea que estén disponibles para su fuente (puede seleccionar varios estilos). Tenga en cuenta que seleccionar demasiados estilos puede ralentizar su 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 @import .
Ahora, dejando esta página abierta , regresa a tu blog (donde seleccionaste Editar HTML ). Vamos a pegar el código de importación de fuentes en su plantilla.
Busque el siguiente texto ubicado hacia el comienzo del editor de plantillas (generalmente ubicado en las líneas 13 o 14):
<b:piel>...</b:piel>
Una vez expandido, pegue la información que copió del cuadro @import en el sitio web de Google Web Fonts, el siguiente texto:
/* Definiciones de variables
Debe tener un aspecto como este:
Haga clic en guardar plantilla . ¡Su fuente ahora 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 busca:
h3.post-título, .comentarios h4
Eliminar la siguiente línea:
fuente: $(publicación.título.fuente);
y reemplácelo con el texto que aparece en la Sección 4: Integrar las fuentes en su CSS en el sitio web de Google Web Fonts.
familia tipográfica: 'Lobster Two', cursiva;
Debería verse así una vez que haya pegado la información de la familia de fuentes:
Dado que seleccionamos Normal 400 para nuestro estilo (consulte el paso 4), también necesitaremos agregar lo siguiente a continuación h3.post-title, .comments h4 {
peso de fuente: 400;
Su código completo debería verse así:
h3.post-título, .comentarios h4 {
familia tipográfica: 'Lobster Two', cursiva;
peso de fuente: 400;
margen: .75em 0 0;
}
Una vez que haya hecho esto, asegúrese de guardar su plantilla .