Custom Fonts in the LiveChat Window

Ewa Hendrychowska in Product, Tutorials, on October 18, 2017, Comments

LiveChat Academy

Hi and welcome to the first part of our new LiveChat Workshop series. We will be talking about various ways of customizing LiveChat and making it truly yours — buckle up!

Today you will learn how to customize the font in your LiveChat widget.

Web-safe fonts and custom fonts

Understanding the distinction between web-safe fonts and custom fonts is crucial if you want to make sure that your LiveChat window looks okay on various machines and in different browsers.

Web-safe fonts

Web-safe fonts are the fonts that are pre-installed on a given device. The font collection depends largely on the operating system the device runs on, which means that the stack of the available fonts will differ from one OS to another.

Therefore, you should never assume that the web-safe font that you selected is going to show up correctly on all devices. CSS Font Stack is a handy tool to quickly check the popularity of all web-safe fonts as well as to generate a font stack for a nice fallback:

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Always provide fallback fonts to control what happens when the first font of your choice one is not available to your visitor.

Custom fonts

As you may easily guess, custom fonts are the fonts that are not shipped with the operating systems. Using them requires either uploading the font files to a remote server or pulling them from, for example, Google Fonts or Typekit.

Changing the font in the LiveChat window

It’s always best when all elements of a website match and the user experience is seamless. However, when you use third-party services, in-depth customization is not always possible.

LiveChat gives you full control over your chat window’s CSS, which means that you can adjust each element to the look and feel of your website.

LiveChat Custom Fonts

Let’s see how to use web-safe fonts, Google Fonts, Font Library and self-hosted fonts to spice up the LiveChat window.

Web-safe fonts

Using one of the web-safe fonts in the LiveChat widget is a piece of cake. Here’s how to do this:

  1. Go to CSS Font Stack and click the name of the font of your choice. Let’s assume it’s Baskerville.

  2. Copy your font’s font-family. In our example it will be the following:

font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif;
  1. Go to your LiveChat dashboard, navigate to Settings > Chat window > Theme > Customise using own CSS and paste the following code into the Custom CSS box:
#body input, #body label, #body select, #body table, #body textarea, a, body, input, label, select, table, table#content, textarea {
font-family: Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", serif!important;
}

Remeber to keep “!important” intact to make sure that the default fonts are properly overwritten.

LiveChat Custom Fonts

Click “I’m done editing” and then “Save changes”.

Easy-peasy!

Google Fonts

Google provides a rich collection of fonts which are used by millions of websites worldwide. Their power stems from the fact that the service is extremely easy to use: no need to download or host anything, it’s just enough to copy and paste the code provided.

To use one of the Google Fonts in your LiveChat window, you will need to do the following:

  1. Select a font by clicking ”+” next to its name:

LiveChat Custom Fonts

  1. Click the black bar on the bottom of the screen to open it. We will need two things from there: the URL (1) and the CSS snippet (2):

LiveChat Custom Fonts

  1. Locate your font’s URL and copy it:

LiveChat Custom Fonts

Note: Before copying the URL you can switch to “Customize” tab to select font weights and languages that you want to support.

Paste this link into the address bar of your browser and hit Enter. Select and copy everything you can see on the screen:

LiveChat Custom Fonts

Note: Various browsers may return different results here. To make sure that the fonts work for the majority of users, repeat this step in all browsers that you want to support. Take a look at Technical Considerations for more details.

  1. Go to your LiveChat dashboard and navigate to Settings > Chat window > Theme > Customise using own CSS.

Paste the code you have just copied to the custom CSS box.

Next, paste the following code underneath:

#body input, #body label, #body select, #body table, #body textarea, a, body, input, label, select, table, table#content, textarea {
font-family: 'Quicksand', cursive!important;
}

Of course replace font-family: 'Quicksand', cursive with the CSS snippet for your font (see point 2. above).

Click “I’m done editing” and then “Save changes”.

Done! From now on your LiveChat window will use the Google Font of your choice:

LiveChat Custom Fonts

Font Library

Font Library is a good alternative to Google Fonts with lots of unique font families. Using their fonts in your LiveChat window may be a bit tricky when done for the first time, so here’s a step-by-step tutorial:

  1. Go to Font Library and click the name of the font you want to have in the LiveChat window. In this example it will be Hanken font.

  2. In the right-hand column locate the section called “Use this font”. Again, we will need the font URL (1) and its CSS snippet (2):

LiveChat Custom Fonts

From the first box, copy the link’s href (in this case it’s https://fontlibrary.org/face/hanken) and open it in your browser.

  1. Copy the content to the clipboard (you can ignore the rules marked as deprecated). Next, go to your LiveChat dashboard and navigate to Settings > Chat window > Theme > Customise using own CSS.

Paste the code you have just copied to the custom CSS box and add ”https://fontlibrary.org” at the beginning of each URL, like in the screenshot below:

LiveChat Custom Fonts

And finally, paste the following underneath:

#body input, #body label, #body select, #body table, #body textarea, a, body, input, label, select, table, table#content, textarea {
font-family: 'HankenLight', sans-serif!important;
}

Of course, replace font-family: 'HankenLight', sans-serif with the CSS snippet for your font (see point 2. above).

Note: Did you notice “sans-serif” added to the original Font Library snippet above? Be a pro and always provide fallback fonts!

Click “I’m done editing” and then “Save changes”.

Self-hosted fonts

Using self-hosted fonts is the trickiest part of this tutorial, but fear not — LiveChat Workshop is here to guide you through the process.

Self-hosted fonts have been briefly described in the LiveChat Knowledge Base, but in this tutorial I will elaborate a bit on this subject.

Prerequisites

You will need your custom font in several formats. For the best cross-browser compatibility the ideal set will be .eot, .woff, .woff2, .ttf and .svg. However, as WOFF and WOFF2 are getting more and more support, you should be fine only with these two.

Note: In need of beautiful fonts which you can legally use on your website? Check out Font Squirrel.

You can use generators like the one from Font Squirrel to convert .ttf and .otf fonts into the formats mentioned above.

The process

If you already have the necessary font files, here’s how to use them in your LiveChat window (we’ll use Arcon font as an example):

  1. Host the fonts on a remote server. The best way to do this is to create a ticket in your LiveChat license and add the font files as attachments.

  2. Go to your LiveChat dashboard and navigate to Settings > Chat window > Theme > Customise using own CSS and paste the following code into the Custom CSS box:

@font-face {
font-family: 'arcon';
font-style: normal;
font-weight: 400;
src: local('arcon'), local('arcon'), url(https://static.livechatinc.com/9113995/QEPNQ/
c6e8422547f34bb5021969d5871033f1/arcon-regular-webfont.woff) format('woff'),
url('https://static.livechatinc.com/9113995/QEPNQ/b80ed1db4bae56670b811e7ed23bec6d/arcon-regular-webfont.woff2') format('woff2');
}

Of course, replace all instances of “arcon” with the name of your font (smallcaps recommended) and the URLs with the URLs of your attachments:

LiveChat Custom Fonts

Finally, paste the following code underneath:

#body input, #body label, #body select, #body table, #body textarea, a, body, input, label, select, table, table#content, textarea {
font-family: 'arcon', sans-serif!important;
}

Click “I’m done editing” and then “Save changes”.

Note: Due to CORS settings, the font will not work in the minimized chat window.

And that’s it! I hope these instructions will help you prettify your LiveChat window and adjust it to the look and feel of your website.

If you have any questions about custom fonts in the LiveChat widget, don’t hesitate to ask!