How to use custom fonts in LiveAgent

A few customers have asked us if they are able to use custom fonts for different segments of LiveAgent. The answer is - Yes! We recommend to use Google Fonts - https://fonts.google.com/, since they are free, usable with different programming languages and easy-to-use. First of all, let's take a look on how to work with Google Fonts.

How to work with  Google Fonts:

Once you reach the Google Fonts website it allows you to filter fonts by font style, languages or another 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 @import link into the section mentioned before. You also need to copy and paste the CSS rule. 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>
/* imports selected fonts */
@import url('https://fonts.googleapis.com/css?family=Gayathri|Livvic:400,900&display=swap&subset=latin-ext');

/* specifies font-family of every element */
html, body, input {
  font-family: 'Gayathri', sans-serif !important;
}

/* specifies font-family of element with class-name: myFont */
.myFont {
  font-family: 'Livvic', sans-serif !important; 
}
</style>