Overview

In this article, we demonstrate how you can add a custom font if the font you’re looking for is not displayed in the UserGuiding font list under Themes.

How to select a custom font from Google Fonts?

For example, if your custom font is “Lora”, you need to follow these steps:

  • Go to Google Fonts page and search Lora.

  • Add two different styles by selecting regular 400 and bold 700.

  • Under the @import section, you can see the URL and the CSS rule of this custom font.

  • Copy the given CSS rule and paste it to the Custom Font CSS area on your theme’s page in your Panel.

  • Then, copy the bit starting with https and ending with 700, and paste it to the Custom Font URL area as shown below.

  • Voilà! You can examine the custom font of your choice through the preview area on the right side of the page.

  • Once you’re satisfied with the theme you’ve created, you can SAVE it. Notice that its name will be displayed in the list of themes.

  • To apply this theme to any of your existing guides, find the guide either in the UserGuiding dashboard or in the Chrome extension, open its settings page and match it with the theme of your custom font.

  • Finally, click on the green Publish Changes button to update the container code and get your theme live.

Related Articles:

How to use custom themes on Guides and Hotspots

Why is the custom theme not applying to my guide completely?

Did this answer your question?