Elementor 字体设置失效？解决 Gutenberg 冲突

用 WordPress 搭建网站时，很多人选择 Elementor 作为页面设计工具，同时也会在文章内容中使用 Gutenberg 编辑器。不少人会遇到一个令人头疼的问题：在 Elementor 中设定的字体样式，没有同步应用到 Gutenberg 创建的段落或标题。这种情况很常见，特别是在主题未针对 Gutenberg 和 Elementor 做好适配的情况下。

根本原因

这个问题通常出现在以下几种情况：

Gutenberg 使用了独立的 CSS 样式表，它优先级更高。
主题或插件为 Gutenberg 提供了额外的样式支持，覆盖了 Elementor 的设置。
Elementor 的全局样式仅在 Elementor 渲染的区域生效，而文章正文通常是由 WordPress 主题控制渲染。

解决方法

1. 使用 Elementor 控制整篇文章样式

如果你的文章页是用 Elementor 模板创建的，可以尝试在 Elementor 里加入“Post Content”小工具，并在其样式设置中调整字体。这样可以直接影响 Gutenberg 内容的呈现方式。

操作步骤：

Elementor > 模板 > 主题构建器。

添加一个 “单篇” 模板（Single Post）。

打开 Elementor 编辑器，找到“Post Content”小工具。

拖进你的文章模板中。

在样式设置中，调整“排版”选项，比如字体、大小、行高等。

更新保存，刷新前端页面。

2. 添加自定义 CSS

如果你使用的是主题的默认文章布局，建议添加一段 CSS，将 Elementor 的字体样式应用到 Gutenberg 的段落和标题元素上。

.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
  font-family: var(--e-global-typography-text-font-family);
  font-weight: var(--e-global-typography-text-font-weight);
  font-size: var(--e-global-typography-text-font-size);
}

这段代码的前提是你已经在 Elementor 中设定了全局字体变量。可以通过“网站设置” > “排版”中查看这些变量是否存在。

3. 检查主题是否注入 Gutenberg 样式

有些主题（比如 Astra、Blocksy）会在前端主动加载 Gutenberg 的编辑器样式，这会影响页面的视觉一致性。你可以在主题设置中查找是否有关闭 Gutenberg 样式加载的选项。操作步骤：

刷新页面，查找是否有 wp-block-library.css 或类似名称的文件加载
打开浏览器的开发者工具（按 F12 或 Ctrl+Shift+I）
切换到“网络（Network）”标签

如果找不到对应设置，可以尝试用以下代码禁用这些样式：

add_action( 'wp_enqueue_scripts', function() {
  wp_dequeue_style( 'wp-block-library' );
}, 100 );

将以上代码添加到子主题的 functions.php 文件中。

小结

Gutenberg 与 Elementor 样式冲突的问题，就是“谁控制前端输出”的问题。如果你想要 Elementor 来掌握全局样式控制权，那就让文章内容也进入 Elementor 的管辖范围；否则就要用 CSS 手动补强。记得测试前后字体是否统一，不要只在编辑器里看效果，前端页面的表现才最关键。

联系我们
教程看不懂？联系我们为您免费解答！免费助力个人，小企站点！	客服微信
① 电话：020-2206-9892
② QQ咨询：1025174874
③ 邮件：info@361sale.com
④ 工作时间：周一至周五，9:30-18:30，节假日休息