Changing the Font Color and Family for Live Chat

In this article we'll show you how you can change the font color or family in your Live Chat settings.  You may want to change it to adhere to your brand and website fonts, or you may want to darken the font for ADA Compliance.

For this example, we're going to change the font color to black in the chat widget and we'll change the font family to Montserrat and link to an external Google Font.

Here's the code that we'll include in our chat CSS override settings.  You'll se that we first link to the Google Font, then we include the CSS overrides inside an additional <style></style> tag.  Finally we end the colors with the !important attribute.

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">

<style>
#title-text {
  color:black !important;
}
/* "Questions? Chat with us - we're here to help!" */
.si-av-list-intro {
  color: black !important;
}
/* All links */
a:link {
  color:black !important;
}
/* All button states */
.btn,.btn:hover,.btn:focus {
  color:black !important;
}
/* User typed text */
.si-comment-wrapper-user .si-comment {
  color:black !important;
}
/* Agent typed text */
.si-comment-wrapper-admin .si-comment {
  color: black !important;
}
textarea, textarea:focus, input[type="text"] {
  color: black !important;
}
select {
  color: black !important;
}
/* Typing field text and emoji */
.btnSend, .btnEmoji, .btnFile {
  color: black !important;
}
/* Typing field text and emoji active states*/}
.btnSend:hover, .btnEmoji:hover {
  color: black !important;
}
/* Agent Name */
.agent-name {
  color: black !important;
}
/* Agent Title */
.agent-role {
  color: black !important;
}
.si-av-list-admin-name {
  color: black !important;
}
body {
  font-family: 'Montserrat' !important
}
</style>

Next, got to your Chat Settings either directly from our website our in our Teams Live Chat settings and choose the 'CSS & Javascript' link.  Copy the code above into the CSS Styles texture and click save.  Once you do this your new settings should be active.

Now, when you open the chat, you'll see your new font and colors as follows:

Override White Font Colors for Lighter Backgrounds

You can also change your button and background colors to lighter backgrounds and override the white font colors to darker colors. You would just use these overrides in your CSS settings:

<style>
#title-text {color:black !important;}
.si-av-list-intro {color: black !important;}
a:link {color:black !important;}
.btn {color:black !important;}
.si-comment-wrapper-user .si-comment {color:black !important;}
</style>

Override Chat Tab Font Color or Size

One final note.  If you'd like to override the color or the font of the Tab style button, you would make these changes in your CSS template in your website since the tab and location of the chat are added to your CSS.

.siButtonText {color:black !important;}

That's it!