Adding a Custom Font to a Module

      Adding a Custom Font to a Module

        Article summary


        Loyalty & Referrals
        Supported plans

        Free, Pro, Premium, Enterprise

        eCommerce Platform


        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.

        You can use Google fonts to browse fonts and locate the font-family name.

        • Font URL - Add a font URL if you want your font to load in the module preview display
        Please note:
        Without a font URL, your font will display on your website, however, it will not be reflected in the module editor preview.
        • 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. 
        The default weight is set to 400 and will apply if you leave the field blank.

        Using a Google font

        In order to use a Google font:

        1. Go to and locate the desired font. In this example, the font name is Lobster
        1. Click Select this style.
        2. Toggle to the Embed tab. 
        3. Copy and paste the font-family name into the font-family field in the module editor.
        4. Copy and paste the URL link into the Font URL field in the module editor.
        5. 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 and then receive a URL that can be added to the module.

        Which font file type should I upload?

        You can upload any font file type, but make sure that the file type is supported on most browsers. 

        We recommend using Web Open Format File (WOFF).


        What does font-family name mean? 

        Font-family name is a CSS font-family property.

        The font-family names are "times", "courier", "arial", etc.

        What are Google fonts? 

        Google fonts aren’t different than any other custom font (or paid font)They are just a free and widely used option.

        The benefit of Google fonts is they don't require manual hosting, since you can just use the embed link. Meaning unlike other fonts, there is no need to host the font files. 

        Was this article helpful?