Use Google fonts within Chat window

Using Web fonts, you can display common font from any devices, not depended on user's device.
Here, it explains how to reflect Web fonts to the Chat.
As an example it will explain method to reflect Google fonts.

※This function can only be done above Business Plan.

　
The rough flow is as follows

１．Acquire Google fonts
２．Set Web Page
３．Set Chat Plus

１．Acquire Google fonts

(1)On [Google fonts] site, click [+] of the font you want to use.

(2)Copy from the box「Embed Font」＞「STANDARD」

(3)Paste the code you copied in (2) to your Website codes.
※Paste in <head>～ </head> in HTML file.

２．Set Web page

(1)Click「Embed Font」＞「@IMPORT」of the font you chose in 1.

(2)Copy the code starts with 「@import url」in between「<style>」and「</style >」
※Do not copy「<style>」and「</style >」itself.

３．Set Chat Plus

Reflect the code in Chat Plus Operator Page.

The Google Font page will still be used, so leave that page and open Chat Plus page in a different tab.

　
(1)Click the setting button on the upper right of the management page.

(2)Click [Chat]>[Design]>[Original CSS]

(3)In the box "Enter original CSS", paste the code you copied in (2) in 2.
※With this method, you can prepare a selected font in your computer.

(4)Start a new line from the line of the code you pasted in (3), and copy and paste the code below.
※With this method, you can designate where you want the font to be. In this case, reflect the font to the whole chat.

#chatplusview a, #chatplusview abbr, #chatplusview acronym, #chatplusview address, #chatplusview applet, #chatplusview big, #chatplusview blockquote, #chatplusview caption, #chatplusview cite, #chatplusview code, #chatplusview dd, #chatplusview del, #chatplusview dfn, #chatplusview div, #chatplusview dl, #chatplusview dt, #chatplusview em, #chatplusview fieldset, #chatplusview font, #chatplusview form, #chatplusview h1, #chatplusview h2, #chatplusview h3, #chatplusview h4, #chatplusview h5, #chatplusview h6, #chatplusview iframe, #chatplusview input, #chatplusview ins, #chatplusview kbd, #chatplusview label, #chatplusview legend, #chatplusview li, #chatplusview object, #chatplusview ol, #chatplusview p, #chatplusview pre, #chatplusview q, #chatplusview s, #chatplusview samp, #chatplusview small, #chatplusview span, #chatplusview strike, #chatplusview strong, #chatplusview sub, #chatplusview sup, #chatplusview table, #chatplusview tbody, #chatplusview td, #chatplusview textarea, #chatplusview tfoot, #chatplusview th, #chatplusview thead, #chatplusview tr, #chatplusview tt, #chatplusview ul, #chatplusview var {

}

※Purposely starting a new line from 「{」and「}」. Please copy it as it is.

(5) Go back to the Google font page which you opened in 1. This time, copy the code in the box「Embed Font」＞「@IMPORT」＞「Specify in CSS」.

(6) Again, go back to the page "Chat Plus original CSS". Copy and paste the code you copied in (5) in between「{」and「}」.

(7)Click [Update]

This is how you set to use Google Fonts in Chat Plus. After clicking [Update], you can confirm whether it is reflected or not in the sample displayed in the center of the screen.
【Noto Serif JP】