Si no tienes alojadas tus fuentes en un servidor propio, te recomendamos un banco de fuentes de Google, en donde podrás elegir entre cientos de opciones. Accede a Google Fonts desde aquí, ¡es gratis!
Desde Google Fonts
1. Ingresa a Google Fonts y elige la fuente que desees. Puedes utilizar el buscador o bien, desplazarte con el mouse o teclado para visualizar las fuentes disponibles:
2. Una vez hayas elegido la fuente, debes dar clic en la misma:
Se abrirá una ventana como esta:
3. Elige uno o más estilos dando clic en "Select this style":
Cada fuente tendrá varios estilos, como ser bold (negrita), italic (cursiva), etc.
4. Cuando hayas finalizado de elegir los estilos, haz clic en el botón del margen superior derecho para ver tu selección de familias de la fuente:
Se desplegará a la derecha el siguiente menú:
5. En la sección Use on the web, haz clic en la opción @import para obtener el código de la fuente:
6. Selecciona y copia el código obtenido para incrustarlo en la tienda:
Desde la tienda
1. Ingresa a Panel de control > Ajustes > Avanzados
2. Ve a Custom before </body> code y pega el código obtenido desde Google Fonts, en el paso 6:
Haz clic en Guardar.
¡La fuente ya se encuentra instalada en la tienda!
⚠️Ahora deberás indicar a qué textos deseas agregar dicha fuente. Puedes cambiar la fuente de toda la tienda o de algunos textos en específico.
3. Corrobora si tienes habilitado el bloque de CSS Personalizado o Custom CSS:
Si no lo tienes no te preocupes, podrás agregar el código en el bloque de Custom before </body> code embebiendo el mismo en las etiquetas <style>..... </style>
Si quieres cambiar la fuente de toda la tienda, puedes utilizar el siguiente código:
body{
font-family: 'Open Sans', sans-serif; /*Aquí deberás colocar la fuente que tu elegiste*/
}
Te quedará de la siguiente manera:
o bien:
Como habrás podido notar, la font-family que agregamos en el bloque de código, coincide con la que elegimos como ejemplo en este artículo. Tu deberás colocar la que hayas seleccionado en Google Fonts.
Para estar seguro, puedes visualizar la línea de código font-family desde aquí:
¡Listo! ya puedes ver los cambios en tu tienda:
Esperamos que este tutorial te haya resultado sencillo. Si tienes consultas escríbenos a [email protected].