--- url: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-fonts' title: 'ビルダーページでブランドフォントを使う | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T11:26:55+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'DXPR Builder自体にはフォント設定がありません。ビルダーページのテキストはテーマのフォントを使います。変更するには、テーマにウェブフォントを読み込み、テーマのCSSをそのフォントに向けます。最終的に、すべてのビルダーページ(エディター内と訪問者向け)にブランドフォントが表示されます。サイトでDXPR Themeを使っている場合は、代わりにテーマ設定でフォントを選びます。' tags: - 'Je huisstijl toepassen' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T11:26:55+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: ビルダーページでブランドフォントを使う description: 'DXPR Builder自体にはフォント設定がありません。ビルダーページのテキストはテーマのフォントを使います。変更するには、テーマにウェブフォントを読み込み、テーマのCSSをそのフォントに向けます。最終的に、すべてのビルダーページ(エディター内と訪問者向け)にブランドフォントが表示されます。サイトでDXPR Themeを使っている場合は、代わりにテーマ設定でフォントを選びます。' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T11:26:55+0000' dateModified: '2026-10-24T11:26:55+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-fonts' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/ja/hc/documentation/learn-dxpr-builder/customization/custom-fonts' description: 'DXPR Builder自体にはフォント設定がありません。ビルダーページのテキストはテーマのフォントを使います。変更するには、テーマにウェブフォントを読み込み、テーマのCSSをそのフォントに向けます。最終的に、すべてのビルダーページ(エディター内と訪問者向け)にブランドフォントが表示されます。サイトでDXPR Themeを使っている場合は、代わりにテーマ設定でフォントを選びます。' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: ホーム item: 'https://dxpr.com/ja' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ja --- [Help Center](/ja/node/75)/[Documentation](/ja/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # ビルダーページでブランドフォントを使う. Learn DXPR BuilderManage the siteJe huisstijl toepassen ## In this guide Related guides - [テーマのCSSでビルダーコンテンツをスタイルする](/ja/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Typography](/hc/documentation/learn-dxpr-builder/element-settings/typography) - [アイコンライブラリー](/ja/hc/documentation/learn-dxpr-builder/customization/icon-libraries) DXPR Builder自体にはフォント設定がありません。ビルダーページのテキストはテーマのフォントを使います。変更するには、テーマにウェブフォントを読み込み、テーマのCSSをそのフォントに向けます。最終的に、すべてのビルダーページ(エディター内と訪問者向け)にブランドフォントが表示されます。サイトでDXPR Themeを使っている場合は、代わりにテーマ設定でフォントを選びます。 ## 始める前に - テーマのファイルにアクセスできる必要があります。カスタムテーマまたはサブテーマを使います。 - フォントのライセンスがWebサイトでの利用を許可していることを確認します。 - 手順では`global-styling`ライブラリと`css/custom.css`を使います。詳しくは[Custom CSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)をご覧ください。 ## セットアップ 1. フォントのスタイルシートを`mytheme.libraries.yml`のライブラリに追加します。Googleフォントの場合は次のとおりです。 ```yaml 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`に設定します。 ```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のルールの上に記述します。 ```css @font-face { font-family: 'BrandFont'; src: url('../fonts/brandfont.woff2') format('woff2'); font-weight: 400; font-display: swap; } ``` 3. 利用するのは`'BrandFont'`です。`font-family`ルールに設定し、ライブラリからGoogleの行を削除してキャッシュをクリアします。 ## 表示内容 すべてのビルダーエレメントのテキストは新しいフォントになります(編集モードと公開ページの両方)。各エレメントの**Style**パネルでは引き続きサイズと色を設定します。詳しくは[テキストサイズと色の変更](/hc/documentation/learn-dxpr-builder/element-settings/typography)をご覧ください。 テキストエディターの**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**のチェックを外します。詳しくは[テキストエディター](/hc/documentation/learn-dxpr-builder/customization/text-editor)をご覧ください。 ## 次のステップ - [カスタムCSS](/hc/documentation/learn-dxpr-builder/customization/custom-css)：この手順で使うライブラリとスタイルシート。 - [テキストサイズと色の変更](/hc/documentation/learn-dxpr-builder/element-settings/typography)：エレメントごとに編集者が設定する内容。 - [アイコンライブラリ](/hc/documentation/learn-dxpr-builder/customization/icon-libraries)：DXPR Builderに付属するアイコンフォント。