Introducción
En este artículo, vamos a ver cómo aplicar fuentes personalizadas a tu página de fidelidad para reflejar mejor tu identidad visual.
📝 Nota: la personalización del CSS está disponible en los planes Advanced y Plus https://www.loyoly.io/plans
Gracias a esta personalización de fuentes puedes:
Aplicar tus propias fuentes a la página de fidelidad para respetar tu identidad visual.
Armonizar la experiencia de usuario con el resto de tu sitio de e-commerce.
Cómo integrar tu personalización CSS
La integración de la fuente personalizada del CSS se realiza mediante la importación de un archivo que agrupa las reglas CSS a aplicar. A continuación, el modo operativo para cargar este archivo.
Dirígete a la página Branding
Haz clic en el botón Modificar de la tarjeta Apariencia general
Despliega la sección CSS personalizado
Haz clic en el campo o en la flecha azul para abrir la ventana de importación
Selecciona tu archivo css
El nombre del archivo debe aparecer tras cerrar la ventana de importación.
Haz clic en el botón Guardar para que el archivo se tenga en cuenta.
¿Qué editar y cómo?
La personalización se realiza en dos pasos:
Primer paso: Declara tus fuentes mediante
@font-face
Aquí está el código a añadir a tu custom CSS:
@font-face { font-family: "FONT_PRIMAIRE"; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/FONT_PRIMAIRE .otf?v=1750418946") format("opentype"); font-weight: 700; font-style: normal; }
@font-face { font-family: "FONT_SECONDAIRE "; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/FONT_SECONDAIRE.otf?v=1750418946") format("opentype"); font-weight: 400; font-style: normal; }
body .text-primary { font-family: "FONT_PRIMAIRE " !important; }
body .text-secondary { font-family: "FONT_SECONDAIRE" !important; }Debes reemplazar las URLs por las de tus propios archivos de fuente.
Utiliza el format() correcto:
.otf → format("opentype")
.woff → format("woff")
.woff2 → format("woff2")
A continuación, añade el texto en tu archivo custom css.
⚠️ Nota:
Si ya hay un archivo CSS personalizado aplicado en Loyoly, añadir un nuevo archivo sobrescribirá el anterior.
En este caso, simplemente añade la nueva línea de código a tu archivo CSS existente y vuelve a cargar este archivo en Loyoly.
2. Segundo paso: En tu archivo CSS personalizado, puedes modificar las fuentes apuntando a las siguientes reglas:
body .text-primarybody .text-secondary
Asegúrate de que los valores de font-family sean coherentes:
Para
.text-primary: utiliza "FONT_PRIMAIRE"Para
.text-secondary: utiliza "FONT_SECONDAIRE"
📝 Atención: asegúrate de utilizar la misma fuente (font-family) que la declarada en el primer paso.
Ejemplo
Aquí tienes un ejemplo de texto utilizando Metric-Bold y Metric-Regular:
@font-face { font-family: "Metric-Bold"; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/Metric-Bold.otf?v=1750418946") format("opentype"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Metric-Regular"; src: url("https://cdn.shopify.com/s/files/1/0068/0932/1537/files/Metric-Regular.otf?v=1750418946") format("opentype"); font-weight: 400; font-style: normal; }
body .text-primary { font-family: "Metric-Bold" !important; }
body .text-secondary { font-family: "Metric-Regular" !important; }
Puedes consultar este documento para más detalles al respecto.