On this page

LiveAgentでカスタムフォントを使用する

Google フォントの埋め込みコードを取得する

Google フォントを LiveAgent アカウントにリンクするには、まず埋め込みコードを取得する必要があります。Google Fonts のウェブサイトにアクセスし、使用したいフォントを見つけてクリックします。フォントの詳細画面で “Get font”（フォントを取得）ボタンをクリックし、フォント選択画面で “Get embed code”（埋め込みコードを取得）をクリックします。

埋め込みコード画面から <link> タイプのコードと font-family CSS パラメーターをコピーします。これらを LiveAgent アカウントの該当する箇所で使用します。

埋め込みコードの例：

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">

CSS パラメーターの例：

font-family: "Fleur De Leah", cursive;

メールテンプレートでカスタムフォントを使用する

メールにカスタムフォントを使用するには、Configuration（設定）> Email（メール）> Customer templates（顧客テンプレート）または Agent templates（エージェントテンプレート）に移動し、編集したいテンプレートを開きます。テンプレートのエディターでソースモードに切り替え、埋め込みコードを先頭に貼り付け、カスタムフォントを適用したい要素に対して CSS スタイルを定義します。

メールテンプレートの設定とカスタマイズの詳細については、こちらの記事をご参照ください。

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">
<style>
.custom-font {
  font-family: "Fleur De Leah", cursive;
}
</style>

Gmail をはじめとする多くのメールクライアントは、セキュリティ上の理由から CSS のサポートが非常に限られており、<link> および <style> HTML タグを削除します。メールにはユニバーサルフォントやウェブセーフフォントを使用することがベストプラクティスです。それでもカスタムフォントを使用したい場合は、インライン CSS スタイルで定義するか、カスタムフォントで書かれたテキストを画像として挿入する方法をお試しください。

コンタクトウィジェットでカスタムフォントを使用する

コンタクトウィジェット（チャットボタン、お問い合わせフォーム、コールボタンなど）のウィンドウにカスタムフォントを使用するには、Configuration（設定）内の該当セクションに移動し、編集したいコンタクトウィジェットを開きます。ウィジェットの設定で、目的のウィンドウを設定するタブに移動し、“edit custom CSS”（カスタム CSS を編集）リンクをクリックしてエディターを開きます。埋め込みコードは CSS スタイルの外側に正しく配置されるよう、</style> と <style> HTML タグで囲む必要があります。

</style>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fleur+De+Leah&display=swap" rel="stylesheet">
<style>

.FormTitle {
  font-family: "Fleur De Leah", cursive;
}

カスタマーポータルでカスタムフォントを使用する

カスタマーポータルやナレッジベースの記事にカスタムフォントを使用するには、Configuration（設定）> Customer portal（カスタマーポータル）> Settings（設定）> General Configuration（一般設定）- Change（変更）に移動します。カスタマーポータルの設定で Tracking codes（トラッキングコード）タブに移動し、“After "（<HEAD> の後）フィールドに埋め込みコードを貼り付けます。