チャットウィンドウ内でGoogleフォントを使用する

WEBフォントを使用すると、ユーザーの端末に依存せず、どの端末からでも共通のフォントを表示させることができます。
チャットプラスで、チャットにWEBフォントを表示させたい場合、以下の手順で反映できます。
今回は例として、Googleフォントの反映方法をご説明します。

ビジネスライトプラン以上でご利用可能な機能です。

 
大まかな流れは以下の通りです。

1.Googleフォントの取得
2.WEBページの設定
3.チャットプラスの設定

1.Googleフォントの取得

(1)「Google Fonts」のサイトで、使いたいフォントの「+」ボタンをクリックします。


(2)「Embed Font」>「STANDARD」枠内のコードをコピーします。


(3) (2)でコピーしたコードを、お客様のWebサイト自体のコードに貼り付けます。
※HTMLファイルの <head></head> にペーストします。

2.WEBページの設定

(1) 手順1で選んだフォントの「Embed Font」>「@IMPORT」をクリックします。


(2) 枠内に表示されたコードのうち、「 <style>」と「 </style >」の間に挟まれている「@import url」から始まるコードをコピーします。
※「 <style>」と「 </style >」自体はコピーしません。

3.チャットプラスの設定

チャットプラスの管理者画面で設定を行い、コードを反映させます。

先ほどのGoogle Fontsのページはまだ使うので、チャットプラスのページは新規タブで開くことをお勧めします。

 
(1) 管理画面右上の設定ボタンをクリックします。


(2)「チャット」>「デザイン」>「独自CSS」をクリックします。


(3)「独自CSSを入力」欄に、手順2(2)でコピーしたコードをペーストします。
※この手順で、お使いのパソコンに選択したフォントを用意できます。


(4) (3)でペーストしたコードから改行して新しい行を作り、そこに以下のコードをそのままコピー&ペーストします。
※この手順で、どこにフォントを反映させるか指定します。今回は、チャット全般に選択したフォントを反映させます。

※コードの最後の「{」と「}」の間は意図的に改行しています。そのままコピーして下さい。


(5) 手順1で開いたGoogle Fontsのページに戻ります。今度は、「Embed Font」>「@IMPORT」>「Specify in CSS」枠内のコードをコピーします。


(6) 再度、チャットプラスの独自CSSのページに戻ります。先ほどペーストしたコード最後の「{」と「}」の間にある空白の1行に、(5)でコピーしたコードをペーストします。


(7)「更新」ボタンをクリックします。

これでGoogleフォントをチャットプラスで使用する設定は終了です。「更新」ボタンをクリック後、画面中央のサンプルで、選択されたフォントが反映されているか、ご確認いただけます。
【Noto Serif JP】

【Kosugi Maru】

【M PLUS Rounded 1c】

※Googleフォントの仕様やサービスに変更があった場合には、本設定では使用できなくなる可能性がございます。

シェアする

フォローする

  • RSSを