How to use custom fonts in LiveAgent

Introduction:

Some customers have inquired about using custom fonts in various LiveAgent segments. The good news is, yes, you can! We recommend using Google Fonts (https://fonts.google.com/) as they are free, compatible with different programming languages, and easy to use. Let's start by exploring how to work with Google Fonts.

How to work with  Google Fonts:

1. Visit the Google Fonts website, where you can filter fonts by style, languages, or other properties. If you have a specific font family in mind, search for it directly.
2. To add a font family, click the plus button in the upper right-hand corner. This will add the font to the "selection drawer" at the bottom of the screen, where you can view and manage your chosen fonts.
3. Click the "selection drawer" to open your font's configuration. Here, you can add different font weights, styles, or language support before integrating them into your website. Be selective, as adding more fonts can slow down your site's loading time.

Once you reach the Google Fonts website it allows you to filter fonts by font style, languages, or other properties, but if you have a font family name in mind you can search for it directly. Each font family has a plus button in the upper right-hand corner. Click the plus button to add the font family to the "selection drawer" that appears at the bottom of the screen. The "selection drawer" is where you will see all the fonts you’ve added. It’s where you will find the code to add to your website.

Click the "selection drawer" to open your font's configuration. This is your last chance to add different font weights, styles, or language support to your font families before adding them to your website. Only add the font weights and styles you know you will need, because the more fonts you add the slower they will load on your site.
 

Alright, we are almost done! All you need to do now is copy and paste the CSS code into any "Custom CSS" or "Source" section of LiveAGent. First, copy the standard <link> code, then you will also need to copy the CSS rules. If you’re adding one Google Font to the whole email template, chat window, customer portal, etc., you can add the CSS font-family rule into your body tag. Otherwise, you will need to be sure you are adding it to the correct element (class name).

Now, let's see some examples using the following code from Google Fonts:

<style>

@import url('https://fonts.googleapis.com/css2?family=Gayathri:wght@100;400;700&family=Livvic:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,900&display=swap');

/* specifies font-family of every element */
html, body, h1, h2, h3, h4, h5, p, a, input {
  font-family: 'Gayathri', sans-serif !important;
}
/* specifies font-family of element with class-name: myFont */
.myFont {
  font-family: 'Livvic', sans-serif !important; 
}
</style>

Custom fonts for Mail Templates

If you want to use a custom font for emails sent to your customers, navigate to Configuration --> Emails --> Customer templates --> Edit the "Ticket reply" template. Switch your template to HTML by clicking the <> button and click "Source" to see the template's source code. Then paste the code mentioned before - see code

By clicking the "Source" button you can switch the view of the template to see how it appears to your customers. As you can see font-family defined for HTML, the body will affect the whole email body, but if you define a specific font-family for a specific class name, this won't be affected by HTML, body preferences.

Back to the top

Custom fonts for Chat Window

If you want to use a custom font for the chat window, navigate to Configuration --> Chats --> Chat buttons --> Edit any of them --> Click the "Chat window" tab --> Click "Custom CSS" and paste the code mentioned before - see code. Please note that it's necessary to exclude <style> and </style> tags since you are already working with a CSS file. Then click "Apply" to save your changes.

In case you wish to use different font-families for different elements, just replace the "myFont" in "Custom CSS" with another class name from the chat window. If you wish to preview your changes click the "Preview and test" button.

Back to the top

Custom fonts for Contact Form

If you want to use custom font for contact form, navigate to Configuration --> Contact forms --> Contact buttons --> Edit any of them --> Click "Contact form" tab --> Design --> Click "Custom css" and paste the code mentioned before - see code. Please note that it's necessary to exclude <style> and </style> tags since you are already working with a css file. Then click "Apply" to save your changes.

In case you wish to use different font-families for different elements, just replace the "myFont" in "Custom CSS" with another class name from the contact form. If you wish to preview your changes click the "Preview and test" button.

Back to the top 

Custom fonts for Knowledge Base

If you want to use a custom font for articles in your knowledge base, navigate to Customer portal --> Knowledge base or General --> Edit any article. Switch your template to HTML by clicking the "Source" button. Then paste the code mentioned before - see code. Now you can edit the article as a basic HTML document using a different font for different sections (class names)

In order to have the custom font available in the whole customer portal / knowledge base, you can simply place it into the Custom CSS field of the Customer Portal configuration
 

Back to the top

Conclusion:

Using Google Fonts, you can easily customize font styles in different LiveAgent segments, making your customer interactions visually appealing and personalized. Just follow the steps outlined above to enhance the appearance of your mail templates, chat window, contact form, and knowledge base articles.