You can customize the fonts, colors, backgrounds of your tours from the HelpHero Editor. The customizations you make will apply across all tours you create. The HelpHero Editor will show you a preview of your customizations live as you make changes. This makes effortless to get the look and feel of your tours just right.
You can edit the basic styling of the HelpHero UI components. Changes you make will apply across all of your tours.
For more advanced styling customizations to the the HelpHero UI you can specify custom CSS. In this example we will show you how to use a custom font.
To tell the browser about our custom font, you will need to add a @font-face
declaration.
@font-face { font-family: Muli; src: url(/examples/demo/fonts/muli.ttf); }
src: url(/examples/demo/fonts/muli.ttf);
font-family: Muli;
Alternatively you can import the font from a external source like Google Fonts
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
Now change the font family on the General Tab to be the same as the name we gave in the CSS declaration.