--- url: 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-fonts' title: '在构建器页面上使用品牌字体 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T00:44:57+00:00' updated: '2026-10-24T09:09:48+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder 没有自己的字体设置：构建器页面上的文本使用主题的字体。要更改它们，请在主题中加载网络字体，并让主题 CSS 指向它。完成后，每个构建器页面都显示您的品牌字体，编辑器和访客端都一样。如果您的网站运行 DXPR Theme，请改用它的主题设置选择字体。 开始之前 您需要能访问主题文件；请用自定义主题或子主题。 请检查字体许可是否允许在网站上使用。 步骤使用 global-styling 库和 css/custom.css（见 自定义 CSS）。 设置 将字体的样式表加入 mytheme.libraries.yml 中的库。以 Google 字体为例： 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-24T09:09:48+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，请改用它的主题设置选择字体。 开始之前 您需要能访问主题文件；请用自定义主题或子主题。 请检查字体许可是否允许在网站上使用。 步骤使用 global-styling 库和 css/custom.css（见 自定义 CSS）。 设置 将字体的样式表加入 mytheme.libraries.yml 中的库。以 Google 字体为例： image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T00:44:57+0000' dateModified: '2026-10-24T09:09:48+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/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-fonts' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-fonts' description: |- DXPR Builder 没有自己的字体设置：构建器页面上的文本使用主题的字体。要更改它们，请在主题中加载网络字体，并让主题 CSS 指向它。完成后，每个构建器页面都显示您的品牌字体，编辑器和访客端都一样。如果您的网站运行 DXPR Theme，请改用它的主题设置选择字体。 开始之前 您需要能访问主题文件；请用自定义主题或子主题。 请检查字体许可是否允许在网站上使用。 步骤使用 global-styling 库和 css/custom.css（见 自定义 CSS）。 设置 将字体的样式表加入 mytheme.libraries.yml 中的库。以 Google 字体为例： breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 首页 item: 'https://dxpr.com/zh-hans' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: zh-hans --- [Help Center](/zh-hans/node/75)/[Documentation](/zh-hans/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 定制构建器内容样式](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css) - [Typography](/hc/documentation/learn-dxpr-builder/element-settings/typography) - [图标库](/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries) DXPR Builder 没有自己的字体设置：构建器页面上的文本使用主题的字体。要更改它们，请在主题中加载网络字体，并让主题 CSS 指向它。完成后，每个构建器页面都显示您的品牌字体，编辑器和访客端都一样。如果您的网站运行 DXPR Theme，请改用它的主题设置选择字体。 ## 开始之前 - 您需要能访问主题文件；请用自定义主题或子主题。 - 请检查字体许可是否允许在网站上使用。 - 步骤使用 `global-styling` 库和 `css/custom.css`（见 [自定义 CSS](/zh-hans/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. 在 `font-family` 规则中使用 `'BrandFont'`，从库中删除 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` 更具体。请在浏览器中检查文本，把它的选择器加入您的规则。 - **某段显示不同字体。** 编辑人员对它用了 **Font family**。选中文本点击 **Remove format**，再到档案中取消勾选 **Font family**；请参阅 [文本编辑器](/zh-hans/hc/documentation/learn-dxpr-builder/customization/text-editor#toolbar-buttons-per-role)。 ## 接下来做什么？ - [自定义 CSS](/zh-hans/hc/documentation/learn-dxpr-builder/customization/custom-css)：这些步骤基于的库和样式表。 - [更改文本大小和颜色](/hc/documentation/learn-dxpr-builder/element-settings/typography)：编辑人员按元素设置的内容。 - [图标库](/zh-hans/hc/documentation/learn-dxpr-builder/customization/icon-libraries)：DXPR Builder 自带的图标字体。