Adding a Custom Font to your Widget

      Adding a Custom Font to your Widget


        Article summary

        Products


        Reviews
        Supported plans

        Free, Starter, Pro, Premium, Enterprise

        eCommerce Platform

        Shopify, Shopify Plus

        Want to display a font in your widget that is not on our list of predefined fonts? Easily upload your own directly from the widget editor. 

        Adding a custom font

        To add a custom font:

        1. From the relevant widget editor, under Fonts, click Add Font.
        2. Complete the following fields:
          1. Font-family name (required) - Enter the font-family name that you want to use on this widget. If you want, you can use Google fonts to browse fonts and locate the font-family name.
          2. Font URL (optional) - Without a font URL, your font will display on your website, however, it will not be reflected in the editor preview. You can upload the font file to a file hosting service such as filehosting.org and then receive a URL that can be added to the font-URL field. 
        Which font file type should I upload?

        You can upload any font file type, but make sure that file type is supported on most browsers. We recommend using Web Open Format File (WOFF).

        • 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.

        Adding a Google font

        To add 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 editor.
        5. Copy and paste the URL link into the Font URL field in the editor.
        6. Click Update.

        You should now see your new font rendered in your editor preview.

        FAQ

        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?