【サブスクペイProfessional】サイト内のフォント追加方法

デフォルトフォント以外で使用されたい文字がある場合に、フォントを下記手順にて追加可能です。
意図としない挙動が発生する可能性がございますので、デフォルト値を推奨してます。
※貴社にて変更される場合につきまして、保守対象外となります。

■フォント追加方法手順

1.salesforce契約管理画面上の歯車マークの[設定] で、[クイック検索] に[静的リソース]を入力、選択します。
2.静的リソース内の上部[新規] をクリックし、静的リソースに名前を入力。
 ※ここで【名前】に入力した文字を控えておいてください。
 ファイルを選択し、アップロードします。
 キャッシュコントロールは非公開のまま保存。

 ※salesforceの仕様上、静的リソースのサイズは最大5MBとなりますため、
  フォントデータ圧縮時、5MB未満となるように構成いただけますと幸いです。

3.次にWEBサイトに移ります。
 デジタルエクスペリエンスのビルダーを開き、左側に表示されている筆のマークをクリック。
 ▼ボタンをクリックし、【CSS を編集】をクリック。

4.下記サンプルの赤文字部分を修正し、参照ください。※CSSルールに乗っ取り構成してください。

サンプルソース:
@font-face {
font-family: 'mspgothic', sans-serif;
src: url('/demotenant1.multi-store.tokyo/path_prefix/s/sfsites/c/resource/mspgothic/font_folder/font_file') format('truetype');
}

※font-familyには、静的リソースにて入力された名前を入れます。
 src: urlには、デジタルエクスペリエンスに表示されているURLを記載してください。
 formatには、アップロード頂きましたフォントファイルのプロパティにてファイルの種類から
 ご確認頂けます。
 TTFファイル[TrueType フォント ファイル (.ttf)]の場合は、format(truetype')となります。
__________2023-03-08_203126.png

 ・単一のフォント ファイルを参照する場合
  サンプルソース:
  @font-face {
  font-family: 'montserrat';
  src: url('/demotenant1.multi-store.tokyo/s/sfsites/c/resource/montserrat') format('truetype');
  }

 ・.zip ファイル内のファイルを参照する場合
  CSSルールにおいて下記のような構文を参照ください。
   / path_prefix /s/sfsites/c/resource/ resource_name / font_folder / font_fileを使用します。

5.筆のマークから【フォント】を選択、[プライマリ フォント] または [ヘッダー フォント] ドロップダウンリスト
 を選択し、【カスタム フォントを使用】をクリック。

6.【CSSを編集】で入力したフォント ファミリ名を追加します。
 ※例として、mspgothicを入力し保存します。

7.[プライマリ フォント] または [ヘッダー フォント] ドロップダウンリストに追加したフォント ファミリ名を
 選択すると使用できます。

手順1イメージ画像
______2.png

手順2イメージ画像
3.png

手順3イメージ画像
4.png

手順4イメージ画像
5.png

手順5イメージ画像
__________6.png

手順6イメージ画像
7.png

手順7イメージ画像
8.png

Powered by Zendesk