解决Elementor字体无法覆盖Gutenberg样式问题的实用方法

在使用 WordPress 建站时，很多人会同时用到 Elementor 和 Gutenberg 编辑器。这两者各有优势，但有时会遇到字体样式冲突的问题。比如，你在 Elementor 里设置了字体，但在使用 Gutenberg 编辑的内容中，这些字体设置却没起作用，看起来像被 Gutenberg 的默认样式覆盖了。这篇文章讲讲为什么会这样，并分享几个实用的解决方法，让你轻松搞定字体样式统一。

为什么 Elementor 的字体设置会被 Gutenberg 样式覆盖？

Gutenberg 编辑器自带一套默认的样式规范，尤其是对段落、标题、列表等元素，内置了字体、字号、行高等CSS规则。这些规则优先级往往比较高，且直接写在 Gutenberg 的样式文件里。即使 Elementor 在页面上全局设置了字体，但 Gutenberg 的内容区块本身带有强制样式，导致你在 Elementor 里做的字体调整看起来没有效果。

简而言之，就是样式冲突和优先级的问题。Gutenberg 给内容区块加了默认字体样式，覆盖了 Elementor 设置的字体。

解决办法1：给 Gutenberg 内容区块加自定义 CSS

最直接的方法是写点自定义 CSS，增加选择器优先级，让 Elementor 的字体样式生效。

进入“wordpress外观” → “自定义” 。这会打开主题自定义器。

找到“额外 CSS”或“自定义 CSS”选项。大多数主题都支持在这里添加额外 CSS 代码。

复制粘贴以下代码到 CSS 编辑框内

.entry-content p, 
.entry-content h1, 
.entry-content h2, 
.entry-content h3, 
.entry-content h4, 
.entry-content h5, 
.entry-content h6 {
  font-family: '你的字体名称', sans-serif !important;
}

这里 .entry-content 是很多主题内容区的主容器类名，具体可以根据你主题调整。!important 用来提高优先级，确保字体设置覆盖 Gutenberg 默认。

解决办法2：在 Elementor 中通过全局 CSS 调整

如果你习惯用 Elementor 来统一控制字体，也可以利用 Elementor 的全局自定义 CSS（需要 Elementor Pro）：

打开 WordPress后台，进入 Elementor → 自定义代码 → 添加代码

在自定义 CSS 输入框中添加以下代码

selector p, 
selector h1, 
selector h2, 
selector h3, 
selector h4, 
selector h5, 
selector h6 {
  font-family: '你的字体名称', sans-serif !important;
}

这里 selector 会自动定位到当前编辑的区域。记得在 Elementor 主题样式中，把字体设置加上!important，避免被其他样式覆盖。

解决办法3：关闭 Gutenberg 自带的样式

如果你不太依赖 Gutenberg 默认样式，也可以选择关闭它。可以通过主题或者插件来禁用 Gutenberg 的前端样式加载，比如：

进入 WordPress后台，选择“外观” → “主题文件编辑器”

打开主题的 functions.php 文件

在文件末尾添加以下代码

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

不过，这样做要小心，可能会影响其他区块的样式表现。建议先备份，测试再用。