Set Up Google Fonts
This article explains how admins can configure and use Google Fonts in engagements using the HTML code.
Overview
You can use Custom fonts to customize your engagement texts to give them the same look and feel as your application. You need to import custom font CSS rules to specify font families from various websites.
Note: Custom fonts is not available for Survey Engagements.
Example Business Use Case: You can import Google Fonts into your engagement to enhance it’s look and style.
Import Google Fonts
You must have basic knowledge of HTML and CSS to import and apply custom fonts.
To import a Google custom font in your engagement:
- Navigate to fonts.google.com
- In the Fonts tab, select a font style.
- Click Select this style.
- Click on the View selected families icon. The Selected Families drawer is displayed.
- From the Selected Family drawer, copy the link to embed the font into the <head> of your HTML.
- Click on the Code View icon in the Editor tab of your Engagement Editor.
- Embed the code into the <head> of your HTML.
- Click Save.
Apply Imported Custom Fonts
To apply the imported custom fonts in the Old Editor:
-
From the Selected Family drawer, copy the value of the font family key value pair.
-
In the CSS tab of the Editor, embed the font family for Dialog Wrapper, Dialog Title, Dialog Content and Dialog Main List.
Notes:
- You can embed different family fonts for different CSS content sections.
- Dialog Wrapper font is set as the default font if the font family is not defined for Dialog Title, Dialog Content and Dialog Main List.
- Arial font is set as the default font if the font family is not defined for Dialog Wrapper.
- Use the CSS keyword !important; to prioritize your custom CSS commands.
To apply the imported custom fonts in the New Editor:
-
From the Selected Family drawer, copy the value of the font family key value pair. In the CSS tab of the Editor, embed the font family for Dialog Wrapper, Dialog Title, Dialog Content and Dialog Main List.
-
In the HTML tab of the editor, change the font type.
