Adding a Custom Font to your Widget

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. 

• 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