Adding a Custom Font to a Module

The Yotpo Loyalty & Referrals on-site modules allow you to customize the fonts of the textual elements displayed in them. You can either use a predefined font or a custom-uploaded font. 

Adding a custom font

If you want to use a custom font in a certain text element of a module, click on the existing font name. You will then see the following fields:

• Font-family name - This is the only item you need to have your font appear onsite. Enter the font-family name that you wish to use on this module.

• Font URL - Add a font URL if you want your font to load in the module preview display. 

• Font weight (optional) - The font-weight CSS property sets the weight, or boldness, of the font. The weights available depend on the font-family you chose. Enter an integer between 100 and 900 to choose a weight. 

Using a Google font

In order to use a Google font:

1. Go to https://fonts.google.com/ and locate the desired font. In this example, the font name is Lobster
   

2. Click Select this style.
3. Toggle to the Embed tab. 
4. Copy and paste the font-family name into the font-family field in the module editor.
5. Copy and paste the URL link into the Font URL field in the module editor.
6. Click Update.
   
   You should now see your new font rendered in your module editor preview.

Custom font URL

If you wish to a custom font that isn't a Google font, simply add the font name and URL.

You can upload the font file to a file hosting service such as filesharing.org and then receive a URL that can be added to the module.

FAQ