🔓 Widget Design Font Customization is unlocked on the Marsello Pro Plan. 

The loyalty widget is a place for your customers to interact with your loyalty program and also access any discount codes sent via marketing emails. You can add your store's brand to your loyalty widget to make your loyalty program your own, including using a custom Google Font.

📝 Note: This custom Google font feature is currently only available for the loyalty widget & tab design customization. 

In this article:

  • Get the Google Font details of your store's chosen font
  • How to customize the loyalty widget font
  • How to customize the loyalty tab font

Common questions this article will help answer:

  • How do I add my store's font to the loyalty widget?
  • Our store's brand font isn't showing as an option in the font drop-down?

Get the Google Font details of your store's chosen font

1. Open https://fonts.google.com/ in your browser window

2. In the search bar enter the Google Font name that your store uses

3. Click on the into the Google Font to open the font's details 

4. Under Styles, click + Select this style of the font version that you'd like to use on your loyalty widget. 

5. In the Selected Family pop-out, click Embed 

6. Copy the font's unique link from the code snippet
To do this, simply copy all of the text after <link href =" and before " rel="stylesheet">

7. Paste the Google Font URL in a safe place for the next section
8. Copy the Google Font's name and paste it in a safe place for the next section 

How to customize the loyalty widget font

1. In your Marsello admin, go to Loyalty > Loyalty Widget

2. Click on the Widget tab

3. Click Font

4. Select the Use Google Font checkbox

5. Enter your Google Font Name

6. Enter your Google Font URL

7. Click Save & Publish

Your Loyalty Widget font will then be updated to your store's chosen Google Font. 

📖 Learn more: Loyalty widget customization

How to customize the loyalty tab font

1. In your Marsello admin, go to Loyalty > Loyalty Widget

2. Click on the Widget tab

3. Click Font

4. Click Use same font as widget which will automatically set your tab font to be the same as your loyalty widget OR you can un-select the checkbox to choose a different font. 

5. Follow the same steps as above to add a custom font to your Loyalty Tab 

6. Click Save & Publish

Your Loyalty Tab font will then be updated to your store's chosen Google Font. 

📖 Learn more: Loyalty tab customization

Did this answer your question?