Elementor自定义字体未显示在实时网站上

在用 Elementor 自定义字体功能时，会遇到一个常见问题：自定义字体未显示在实时网站上。

这种问题的原因有很多，可能涉及缓存、HTTP/HTTPS 设置、CORS 错误等。本文会详细分析可能的原因和解决方案。

可能的原因和解决方案

缓存问题

问题可能是由于缓存问题引起的。

清除缓存：

• 清除 WordPress 缓存插件（如果有使用缓存插件）。
• 如果用了CDN加速等，清除服务器缓存。
• 清除浏览器的缓存。
• 清除所有缓存后，再次检查。 如果浏览器的缓存未完全清除，可能需要使用其他浏览器或以隐身模式浏览。

HTTP/HTTPS 不匹配

如果最近从 HTTP 迁移到 HTTPS，则可能需要重新上传字体文件。

要重新上传字体文件：

1. 从WordPress仪表盘导航到Elementor > 自定义字体。 

2. 如果列出的 URL 不是以https开头，单击删除。

3. 单击“上传”重新上传文件。

4. 导航到Elementor > 工具。

5. 单击“重新生成 CSS 和数据” 。URL 现在应该以https开头，并且您的字体应该出现在前端。
如果这仍然不起作用，您可能在之前迁移到 HTTPS 时遇到了其他问题。

6. 导航到Elementor > 工具 > 替换 URL。

7. 在右侧窗格中，找到更新站点地址（URL）部分。

8. 在旧 URL 字段中输入带有HTTP 的站点 URL 。 

9. 在新 URL 字段中输入带有HTTPS 的站点 URL 。

10. 单击“替换 URL”。

11. 向下滚动并单击“保存更改”按钮。

12. 导航至“设置”>“常规”。

13. 确保WordPress 地址 (URL)和站点地址 (URL)以https开头。

控制台中的 CORS 错误

如果自定义字体未显示并且在浏览器控制台中收到 CORS 错误，只能联系服务器提供商修改服务器的 CORS 策略。 

导入模板中的字体问题

如果导入了包含自定义字体的 Elementor 模板，这些字体可能不会自动导入，导致字体未显示。

解决方案：

• 手动将自定义字体上传到 Elementor > 自定义字体。导入模板时，确保所有字体已正确添加。

所选字体粗细不可用

自定义字体可能不支持所有字体粗细。如果在排版设置中选择了某个字体粗细，而自定义字体文件未包含该粗细，则字体可能根本不会显示。

解决方案：

• 在 Elementor 中选择适用于自定义字体的字体粗细。必要时，咨询字体设计师，确保了解字体支持的所有粗细选项。

无效的自定义代码

无效的自定义 CSS 或 JavaScript 代码可能会影响网站的显示，包括导致自定义字体无法正常显示。

解决方案：

• 仔细检查并删除可能的无效代码，尤其是自定义的 CSS 或 JavaScript。如果无法确定代码问题，可以暂时禁用这些自定义代码，测试字体是否恢复显示。

未包括所有字体变体

不同设备和浏览器对字体的处理方式可能有所不同。因此，为确保自定义字体能在所有设备上正确显示，需要上传所有必要的字体变体，包括 .ttf、.svg、.woff、.woff2 和 .eot。

解决方案：

确保上传了所有字体文件的变体。如果缺少任何变体，可能会导致以下问题：

• 字体回退到默认字体
• 文本在网站上无法显示

为了避免这些问题，确保上传完整的字体变体，支持不同浏览器和设备的显示需求。