ビルダーページでブランドフォントを使う.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder自体にはフォント設定がありません。ビルダーページのテキストはテーマのフォントを使います。変更するには、テーマにウェブフォントを読み込み、テーマのCSSをそのフォントに向けます。最終的に、すべてのビルダーページ(エディター内と訪問者向け)にブランドフォントが表示されます。サイトでDXPR Themeを使っている場合は、代わりにテーマ設定でフォントを選びます。

始める前に

  • テーマのファイルにアクセスできる必要があります。カスタムテーマまたはサブテーマを使います。
  • フォントのライセンスがWebサイトでの利用を許可していることを確認します。
  • 手順ではglobal-stylingライブラリとcss/custom.cssを使います。詳しくはCustom CSSをご覧ください。

セットアップ

  1. フォントのスタイルシートをmytheme.libraries.ymlのライブラリに追加します。Googleフォントの場合は次のとおりです。

    global-styling:
  css:
    theme:
      'https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap': { type: external }
      css/custom.css: {}

  2. フォントをcss/custom.cssに設定します。

    body {
  font-family: 'Inter', sans-serif;
}

  3. キャッシュはConfiguration > Development > Performance (/admin/config/development/performance)でクリアします。

  4. ビルダーでページを開き、Textエレメントを確認します。

フォントのセルフホスティング

セルフホストのフォントではサードパーティーへのリクエストが発生しないため、プライバシー規則への対応に有効な場合があります。

  1. フォントをWOFF2形式でダウンロードし、テーマのfonts/フォルダーに配置します。

  2. 各ウェイトをcss/custom.cssに、手順2のルールの上に記述します。

    @font-face {
  font-family: 'BrandFont';
  src: url('../fonts/brandfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

  3. 利用するのは'BrandFont'です。font-familyルールに設定し、ライブラリからGoogleの行を削除してキャッシュをクリアします。

表示内容

すべてのビルダーエレメントのテキストは新しいフォントになります(編集モードと公開ページの両方)。各エレメントのStyleパネルでは引き続きサイズと色を設定します。詳しくはテキストサイズと色の変更をご覧ください。

テキストエディターのFont familyボタンはデフォルトでオフです。CKEditor標準のウェブセーフフォントの一覧であり、ブランドフォントではないため、ブランド統一のためにオフのままにします。

DXPR Theme

DXPR Themeには独自のフォント設定があります。Appearanceを開き、DXPR Themeの設定(/admin/appearance/settings/dxpr_theme)を開いてFontsを展開します。Base Font、Headings、Navigation、Site Name、Blockquoteを個別に設定できるため、これらにはCSSが不要です。

フォントが表示されない場合

  • テキストが古いフォントのまま。ライブラリが読み込まれていないか、キャッシュが古いCSSを保持しています。mytheme.info.ymlにライブラリが記載されていることを確認し、/admin/config/development/performanceでキャッシュをクリアします。
  • 見出しや一部のボックスが別のフォントのまま。そのエレメントへのテーマルールがbodyより詳細度が高い状態です。ブラウザーでテキストを検証し、セレクターをルールに追加します。
  • 1つの段落だけフォントが異なる。編集者がその段落にFont familyを適用しています。テキストを選択してRemove formatをクリックし、プロファイルでFont familyのチェックを外します。詳しくはテキストエディターをご覧ください。

次のステップ