テーマへのカスタムフォントのアップロード

  • リリースバージョン: Zurich
  • 更新日 2025年07月31日
  • 所要時間：3分

    • テーマビルダーテーマで最大 10 個のカスタムフォントファミリーと無制限の数の関連するフォントフェイスをアップロードしてプレビューできます。

    始める前に

    必要なロール：admin

    このタスクについて

    フォントファミリーは、共通のデザインを共有するフォントのグループであり、標準、太字、斜体などの異なるフォントフェイスが含まれる場合があります。たとえば、Arial はフォント ファミリであり、Arial フォント ファミリ内には、Arial Regular、Ariel Bold、Arial Italic などのフォント フェースがあります。

    一度に 1 つのフォントファミリーのみをアップロードしてください。 テーマビルダー では、可変型フォントはまだサポートされていません。

    重要:
    使用ライセンスが付与されているフォントのみをアップロードしてください。サイズによっては、カスタムフォントがページ上のテキストの量を誤って調整することがあります。テーマをインスタンスに公開する前に、必ずフォントをテストしてプレビューしてください。

    手順

    1. 移動先 すべて > Now Experience フレームワーク > テーマ > テーマビルダー.
      テーマビルダーランディングページがホームページビューに表示されます。
    2. [ページ] ドロップダウンリストを使用して、[エディター] ページビューを選択します。
      図 : 1. [ページ] ドロップダウン リスト
      [エディター] が選択されたページのドロップダウンリスト。
    3. [テーマ] ドロップダウン リストから、編集するテーマを選択します。
      [グローバルスタイル] タブが自動的に開き、[概要] パネルが表示されます。
      図 : 2. エディターページビュー
      エディターページの表示例。
    4. [概要] パネルから [タイポグラフ] セクションに移動し、[ カスタムフォントファミリーを追加] を選択します。
      図 : 3. [概要] パネルの [タイポグラフ] セクション
      [カスタムフォントファミリーを追加] が選択された [概要] パネルの [地形] セクション。
      注:
      タイポグラフィパネルから直接フォントをアップロードすることもできます。
      図 : 4. タイポグラフパネル
      グローバルスタイルのタイポグラフパネル。
      [カスタムフォントファミリを追加] モーダルが表示されます。
    5. カスタムフォントファミリーをアップロードするには、次のいずれかのオプションを使用します。
      • [参照] を選択し、コンピューターのファイル ブラウザーからカスタム フォント ファミリ ファイルを選択して、[開く] を選択します。
      • コンピューターのファイルブラウザーからカスタムフォントファイルをドラッグし、ファイルを直接モーダルにドロップします。
      注:
      フォントファミリファイルが次のガイドラインを満たしていることを確認してください。そうでない場合は、ファイルが保存されません。
      • 2 MB 未満
      • WOFF、TTF、または ZIP 形式
      図 : 5. サイズと形式が制限されたカスタムフォントファミリモーダルを追加
      [参照] をオンにした状態でカスタムフォントファミリモーダルを追加します。
    6. オプション: モーダル内の矢印を使用して、カスタムフォントファミリとともにアップロードしたフォントフェースを表示します。
      注:
      フォントフェースはコンポーネントに個別に適用できますが、フォントファミリーはグローバルに適用されます。
      図 : 6. カスタムフォントファミリモーダルプレビューペインを追加
      1 つのフォントフェイスが表示され、追加のフォントフェイスを表示する矢印がハイライト表示された、[カスタムフォントファミリーを追加] モーダルプレビューペイン。
    7. [Save (保存)] を選択します。
      新しいフォント ファミリは、[ カスタム フォントの管理] の [タイポグラフ] セクションに、関連するフォント フェースと共に表示されます。
      図 : 7. カスタムフォントファミリーがリストされたタイポグラフセクション
      新しいカスタムフォントファミリーとフォントフェイスがリストされた [タイポグラフ] セクション。
    8. オプション: 次のいずれかのオプションを使用して、選択したフォントファミリーまたはフォントフェースがどのように表示されるかをプレビューします。
      • メインステージの UI スタイルプレビュー タブまたは エクスペリエンスプレビュー タブを使用して、新しいフォントがテーマ全体でグローバルにどのように表示されるかを確認します。
      • [ カスタムフォントの管理 ] ヘッダーの下に表示されているプレビューするカスタムフォントファミリーまたはフォントフェース名を選択して、プレビューモーダルを開きます。

    タスクの結果

    カスタムフォントをアップロードしたら、それをデフォルトのフォントとして選択してテーマに適用できます。詳細については、「デフォルトのフォントを編集」を参照してください。最後に追加されたフォント ファミリは、[ カスタム フォントの管理 ] ボックスの一覧の下部に表示されます。