UserGuiding

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 <a href="https://fonts.google.com/" target="_blank" rel="nofollow noopener noreferrer">Google Fonts</a> 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.

- First, go to the <a href="https://fonts.google.com/" target="_blank" rel="nofollow noopener noreferrer">Google Fonts</a> 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<a href="https://panel.userguiding.com/" target="_blank" rel="nofollow noopener noreferrer"> UserGuiding dashboard</a> 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.

- 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<a href="https://panel.userguiding.com/" target="_blank" rel="nofollow noopener noreferrer"> UserGuiding dashboard</a> 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.