Home > Technical Support > Tips & Tricks > How to use custom fonts in LiveAgent

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.s.
 


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>

  • Custom fonts for Mail Templates
  • Custom fonts for Chat Window
  • Custom fonts for Contact Form
  • Custom fonts for Knowledge Base
  • Custom fonts for:  Mail Templates

    If you want to use 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 template's source code. Then paste the code mentioned before - see code



    By clicking the "Source" button you can switch the view of template to see how it appears to your customers. As you can see font-family defined for html, body will affect the whole email body, but if you define specific font-family for 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 custom font for chat window, navigate to Configuration --> Chats --> Chat buttons --> Edit any of them --> Click "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 chat window. If you wish to preview your changes click "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 contact form. If you wish to preview your changes click "Preview and test" button.

    Back to the top

    Custom fonts for:  Knowledge Base

    If you want to use custom font for articles in you knowledge base, navigate to Customer portal --> Knowledge base or General --> Edit the 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 basic html document using different font for different sections (class-names)



    Back to the top

    Ready to try LiveAgent?

    It's free for the first 14 days! No credit card required.

    Get Started
    We work well with others...
    Magento Joomla Wordpress Mailchimp
    Contact us

    support@ladesk.com

    +1-800-811-6590 (Toll Free in USA & Canada)

    +421 2 33 456 826 (European Union & Worldwide)

    Quality Unit, LLC 616 Corporate Way, Suite 2-3278 Valley Cottage, NY 10989

    Stay in touch
    Blog Google+
    © 2004-2015 QualityUnit.com, All rights reserved