Introduction:

In this article, we’ll show you how to apply custom fonts to your loyalty page to better reflect your brand’s visual identity

📝 Note: CSS customization is available on the Advanced and Plus plans.

https://www.loyoly.io/plans

What this feature allows you to do

Thanks to custom font support, you can:

Apply your own fonts to the loyalty page to match your brand guidelines.
Create a consistent user experience with the rest of your e-commerce website.

How to integrate your custom CSS

Custom font integration is done by importing a file containing the CSS rules you want to apply. Here’s how to upload this file:

Go to the Branding page
Click the Edit button on the General Appearance card
Expand the Custom CSS section

Click on the field or the blue arrow to open the import window
Select your CSS file

Capture+d-E2-80-99e-CC-81cran+2024-11-29+a-CC-80+11_40_50.png (977×800)

The file name should appear after closing the import window.

Capture+d-E2-80-99e-CC-81cran+2024-11-29+a-CC-80+11_41_16.png (510×434)

Click the Save button to apply the uploaded file.

What to edit and how?

Customization is done in two steps:

The first step is:
Declare your fonts using @font-face

Here is the code to add to your 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; }

You must replace the URLs with those of your own font files.

Use the correct format() :
- .otf → format("opentype")
- .woff → format("woff")
- .woff2 → format("woff2")

Next, add the following to your custom CSS file:

⚠️ Note:
If a custom CSS file is already applied in Loyoly, uploading a new file will overwrite the previous one.
In this case, simply add the new code line to your existing CSS file, then re-upload it to Loyoly.

2. Second step:

In your custom CSS file, you can modify the fonts by targeting the following rules:

body .text-primary
body .text-secondary

Make sure the font-family values are consistent:

For .text-primary: use "PRIMARY_FONT".

For .text-secondary: use "SECONDARY_FONT".

📝 Make sure to use the same font-family as declared in the first step.

Example:

Here is a sample text using Metric-Bold and 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; }

Vous pouvez consulter ce document Pour plus de détails à ce sujet.

Modify fonts

Custom CSS

Custom CSS: Add a custom font