WordPress 网站搬家后 Elementor 字体 Mixed Content 报错解决方法（彻底修复 HTTPS 字体加载失败）

在使用 WordPress 搭配 Elementor 搭建网站时，很多站长都会遇到这样一个问题：网站完成搬家、更换域名或启用 HTTPS 后，浏览器控制台出现大量 Mixed Content（混合内容） 报错，导致字体无法加载，页面样式异常。

例如：

Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure font 'http://old-domain.com/wp-content/uploads/elementor/google-fonts/fonts/roboto.woff2' This request has been blocked; the content must be served over HTTPS.

本文将详细分析问题原因，并提供最彻底的解决方案。

什么是 Mixed Content？

Mixed Content（混合内容）是指：

• 页面使用 HTTPS 访问；
• 页面中的某些资源（字体、图片、CSS、JS 等）仍然通过 HTTP 加载。

现代浏览器为了保证网站安全，会直接阻止这些不安全资源加载，因此就会看到类似以下错误：
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure font
如果被阻止的是字体文件，就会导致：

• 页面字体恢复默认字体
• 图标字体无法显示
• 页面布局发生变化
• Google Lighthouse 安全评分下降

为什么 Elementor 更容易出现这个问题？

很多站长认为：

「我已经使用网站搬家插件替换了数据库中的旧域名，为什么还是会引用旧网址？」

实际上，问题并不在数据库，而是在 Elementor 自动生成的静态 CSS 文件。
Elementor 为了提升加载速度，会将 Google Fonts 下载到本地，并生成对应的 CSS 文件。
这些文件通常位于：
/wp-content/uploads/elementor/google-fonts/
例如：

wp-content/uploads/elementor/google-fonts/ 
│
├── roboto.css 
├── poppins.css 
├── fonts/ 
│ ├── roboto-xxxx.woff2 
│ └── poppins-xxxx.woff2

其中 CSS 内容可能类似：

@font-face { font-family: 'Roboto'; src: url('http://old-domain.com/wp-content/uploads/elementor/google-fonts/fonts/roboto.woff2'); }

请注意：
这里写入的是绝对网址。

为什么网站搬家插件没有修改？

绝大多数 WordPress 搬家插件，例如：

• Duplicator
• All-in-One WP Migration
• WPvivid Backup
• UpdraftPlus
• Migrate Guru

都会替换：
数据库内容
WordPress 配置
但是不会修改：
wp-content/uploads/
里面已经生成的静态 CSS 文件。
因此：
数据库已经变成：
https://new-domain.com
但是 Elementor 生成的 CSS 仍然保持：
http://old-domain.com
浏览器就会认为这是 Mixed Content。

如何确认是不是 Elementor 导致？

打开浏览器开发者工具（F12）。
进入：
Network
过滤：
woff2
如果字体来源类似：
/wp-content/uploads/elementor/google-fonts/
基本可以确定就是 Elementor 本地字体缓存。
也可以直接查看：
wp-content/uploads/elementor/google-fonts/
打开 CSS 文件，如果还能看到旧域名：
http://old-domain.com
那么问题已经找到。

最彻底的解决方法

方法一：删除 Elementor 本地字体缓存（推荐）

删除目录：
wp-content/uploads/elementor/google-fonts/
然后进入后台：
Elementor → Tools → Regenerate CSS & Data
点击：
Regenerate Files & Data
Elementor 会重新生成所有字体 CSS，并自动使用新的 HTTPS 地址。

方法二：直接替换（推荐）

进入主机文件管理面板，找到wp-content/uploads/elementor/google-fonts/，编辑CSS文件，批量替换网址。

为什么搜索替换没有效果？

很多站长会执行：
wp search-replace 'http://old-domain.com' 'https://new-domain.com'
或者使用：
Better Search Replace
结果依然报错。
原因就是：
Elementor 的字体 CSS 不在数据库中，而是服务器上的静态文件，因此数据库替换无法修改这些文件。

推荐的网站迁移流程

为了避免以后再次出现类似问题，建议每次迁移网站后执行以下流程：

• 完成网站搬家。
• 修改 WordPress 地址。
• 执行数据库 Search Replace。
• 删除：wp-content/uploads/elementor/css/ 和 wp-content/uploads/elementor/google-fonts/

• Elementor → Regenerate CSS & Data。
• 清理缓存插件。
• 清理 CDN 缓存。
• 检查浏览器 Console 是否还有 Mixed Content。

按照以上步骤操作，几乎可以解决所有 Elementor 因换域名、HTTPS 或网站迁移导致的字体加载异常问题。

总结

WordPress 网站迁移后出现 Elementor 字体 Mixed Content 报错，大多数情况下并不是数据库替换失败，而是 Elementor 本地字体缓存（google-fonts）中的静态 CSS 文件仍然保留旧域名的绝对 URL。
只需删除：
wp-content/uploads/elementor/google-fonts/
并重新生成 Elementor CSS，即可彻底修复 HTTPS 字体加载失败的问题。
如果你经常进行 WordPress 网站搬家，建议将 清理 Elementor CSS、清理字体缓存、重新生成 CSS、清理 CDN 缓存 作为固定流程，这样能够有效避免因旧域名残留导致的 Mixed Content、字体丢失以及页面样式异常等问题。