You can use your platform's fonts in your guides and hotspots to keep your onboarding content with the same look and feel as your application.
In this article, we demonstrate how you can add custom fonts to your Themes and assign them to your guides and hotspots.
Why use a custom font?
Preserving consistency and rhythm of a product adoption experience is only possible if you could blend in all of the onboarding content with your own website’s UI elements and style.
How to add a Custom Font to a Theme?
Let’s get to work by arriving at the UserGuiding dashboard.
Find the Themes under “Customization” in the left-hand menu, click and go to its page.
Ps: Here, you can always find your existing themes in list view.
To create a new one from scratch, click on orange colored - create a new theme button on the top right.
First, give your theme a catchy name - that way - selecting a theme for a certain guide could be an easy decision.
Define a Custom Font
Arrive at the Text section; here, we can change the font color, size and alignment of the text that we’ll use within our guides whether it’s a heading or a body.
Most importantly, a custom font, preferably the font type on your platform, can be set within this section.
To learn which type of font is used in your web platform, visit one of its pages and make a right-click and then click on Inspect.
That way, you can see the innards of your site as well as the fonts it uses. Let's say, as an example, the type of the custom font we want to set for our theme is “Lora”.
From this point forth, we’ll go to the Google Fonts, type Lora into the search bar and go to Lora's page.
Here, we can add two different styles by selecting one regular 400 and another bold 700.
Then click onto the window icon on the top right and view the selected families.
If we pass onto the Embed tab, we can see the url and the CSS rule of this custom font.
Copy the bit starting with https and ending with 700, then paste it to the Custom Font URL compartment on your theme’s page in https://panel.userguiding.com/.
Also, copy the given Css rule and, paste it to the Custom Font Css compartment on the same page.
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 has taken a place 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 having your custom font.
Finally, click on green Publish Changes to update the container code, meaning the live version of your guide.