在构建器页面上使用品牌字体.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

DXPR Builder 没有自己的字体设置：构建器页面上的文本使用主题的字体。要更改它们，请在主题中加载网络字体，并让主题 CSS 指向它。完成后，每个构建器页面都显示您的品牌字体，编辑器和访客端都一样。如果您的网站运行 DXPR Theme，请改用它的主题设置选择字体。

开始之前

  • 您需要能访问主题文件；请用自定义主题或子主题。
  • 请检查字体许可是否允许在网站上使用。
  • 步骤使用 global-styling 库和 css/custom.css（见 自定义 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. 在 font-family 规则中使用 'BrandFont'，从库中删除 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 更具体。请在浏览器中检查文本，把它的选择器加入您的规则。
  • 某段显示不同字体。 编辑人员对它用了 Font family。选中文本点击 Remove format，再到档案中取消勾选 Font family；请参阅 文本编辑器。

接下来做什么？