フォントの指定について

フォントの指定は可能です。
何も指定していない場合、KARTEのアクションテンプレートに反映されるフォントについては、サイト側のフォント設定が反映される仕様です。
KARTE提供テンプレートは、フォントの指定をしていないため、基本的にはサイト側のフォント設定が反映されますが、もしサイト側でフォント指定をしていない場合はカスタマイズにて接客アクション毎にフォントの指定をする必要があります。

フォントを変更・あえて指定したい場合は、サイト側でフォントを読み込み、KARTE内のアクション編集画面</>カスタマイズ「CSS」にて該当のフォントを指定してください。

CSSの例：

font-family: 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;

ヒラギノ角ゴシック、メイリオ、MS Pゴシックなどを優先順位付きで指定することができます。

なお、サイトのフォントが正しく反映されているかは、エディタ画面のプレビューではなくテスト配信で確認していただくことを推奨します。

フレックスエディタでのフォント指定について

フレックスエディタで指定できるフォントは「Webフォント」と呼ばれるもので、
ブラウザやOSに依存せず共通で利用できるフォントがラインナップされています。
指定されたWebフォントは自動的に読み込まれ、iOS / Android / PC など環境を問わず統一した表示が可能です。

  • OSごとに標準フォント（例：メイリオ、ヒラギノ、Robotoなど）は異なるため、完全に同一の見た目にはなりません
  • Webフォントを利用する場合、Flexエディタが自動で読み込みを行うため、各デバイスで統一された見た目が再現できます

フレックスエディタの共通コードでフォントを指定する例

フレックスエディタでは、共通コード > CSS に任意のフォント指定を記述することも可能です。
特定の要素に対して OS標準フォントを優先的に適用したい場合などに利用できます。

以下は、.text 要素と .button 要素に異なるフォント指定を行う例です。

記述例

.text {
  font-family: 'Helvetica', 'Hiragino Sans', 'メイリオ', sans-serif;
}

.button {
  font-family: 'メイリオ', sans-serif;
}
  • .text では Helvetica → Hiragino Sans → メイリオ → sans-serif の順でフォントが適用されます
  • .button では メイリオが存在しない OS（例：macOS）では、次の sans-serif にフォールバック します

ブランドスタイル設定でデバイス標準フォントを指定する

デバイス標準フォントを利用する場合は、ブランドスタイル設定から指定しておくことが可能です。
上から優先順でフォントが適用されます。

詳細はこちらをご確認ください：
👉 ブランドスタイル設定 > フォント設定とは？

null

OS標準フォントを利用したい場合

OS標準フォントを指定したい場合は、ブランドスタイル設定やCSSで直接指定することも可能です。
この場合は、CSSの一般的なルールに従い、上から順に利用可能なフォントが存在すればそのフォントが適用され、存在しない場合はOSのデフォルトフォントにフォールバックします。

CSSの例：

font-family: 'Helvetica', 'Hiragino Sans', 'Roboto', 'Noto Sans CJK JP', sans-serif

Helvetica、Hiragino Sans、Roboto、Noto Sans CJK JP、sans-serif の順に指定することで、
iOSではHelvetica、AndroidではRobotoが適用されます。
存在しないフォントは順にスキップされ、次の指定またはOS標準フォントが使われます。

OSごとのフォントを明示的に分けたい場合

CSSのみでOSごとにフォントを完全に分けて指定することはできません。
厳密に分けたい場合は、共通コード設定などで条件分岐の実装が必要です。