Using custom fonts in LiveAgent

Table of Content

Getting an embed code of a Google font
Using custom fonts in email templates
Using custom fonts in contact widgets
Using custom fonts in the customer portal

To personalize and enhance the visual appeal of your customer interactions, you can link Google Fonts to your LiveAgent account to use them in your email templates, contact widgets, and customer portal.

Please note that working with the custom fonts requires basic knowledge of HTML and CSS code.

Getting embed code of a Google font

To link a Google font to your LiveAgent account, you first need to get its embed code. Visit the Google Fonts website, find the font you'd like to use and click on it. In the font's details, click on the "Get font" button, and then click on the "Get embed code" in the fonts selection screen.

Copy the <link> type code and the font-family CSS parameter from the Embed code screen. These will be used in the desired segment of your LiveAgent account.

Example of an embed code:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">

And the CSS parameter:

font-family: "Fleur De Leah", cursive;

Using custom in email templates

To use a custom font in your emails, navigate to Configuration > Email > Customer templates or Agent templates, and edit the desired template. In the template's editor, switch to the source mode, paste the embed code at the very beginning, and define the CSS style for the element on which you want to apply the custom font.

For more detailed information about setting up and customizing email templates, see this article.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">
<style>
.custom-font {
  font-family: "Fleur De Leah", cursive;
}
</style>

Most email clients, including e.g. Gmail, have very limited support for CSS due to security reasons, and they remove <link> and <style> HTML tags. The best practice is to use universal or web-safe fonts in your emails. If you still insist on using a custom font, you might try defining it in the inline CSS style, or add the text in the custom font as an image instead.

Using custom fonts in contact widgets

To use a custom font in the window of a contact widget (chat button, contact form, call button, etc.), navigate in Configuration to the relevant section to edit your selected contact widget. In the widget's settings, go to the tab that configures the desired window and click the "edit custom CSS" link to open the editor. The embed code needs to be enclosed in </style> and <style> HTML tags to be properly placed outside the CSS styles.

</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">
<style>

.FormTitle {
  font-family: "Fleur De Leah", cursive;
}

Using custom fonts in the customer portal

To use a custom font in your customer portal or knowledge base articles, navigate to Configuration > Customer portal > Settings > General Configuration - Change. In the customer portal settings, go to the Tracking codes tab, and paste the embed code into the "After <HEAD>" field.