All Collections
Engagement FAQ
How can I select a custom font if my font is not listed in Themes?
How can I select a custom font if my font is not listed in Themes?

Learn how to use custom fonts from Google Fonts for Guides/Hotspots.

Simay avatar
Written by Simay
Updated over a week ago


This article demonstrates 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:

  • First, go to the Google Fonts page and search Lora.

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

Did this answer your question?