在使用 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 );
不过，这样做要小心，可能会影响其他区块的样式表现。建议先备份，测试再用。
解决办法4：优先使用 Elementor 创建内容
如果你的网站对视觉风格要求比较高，字体统一非常重要，可以考虑在更多页面或文章中用 Elementor 来设计内容，而不是用 Gutenberg。这样，字体样式和布局都在 Elementor 里直接设置，避免冲突。
小结
字体样式不统一，通常是因为 Gutenberg 自带的 CSS 优先级高，覆盖了 Elementor 设置。解决这个问题，可以用自定义 CSS 提高优先级，或关闭 Gutenberg 样式，甚至减少 Gutenberg 内容的使用。掌握了这些方法，你的网站字体就能保持一致，看起来更加专业统一。