在用 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
。
解决方案:
确保上传了所有字体文件的变体。如果缺少任何变体,可能会导致以下问题:
- 字体回退到默认字体
- 文本在网站上无法显示
为了避免这些问题,确保上传完整的字体变体,支持不同浏览器和设备的显示需求。
联系我们 |
---|
文章看不懂?联系我们为您免费解答!免费助力个人,小企站点! |
① 电话:020-2206-9892 |
② QQ咨询:1025174874 |
③ 邮件:info@361sale.com |
④ 工作时间:周一至周五,9:30-18:30,节假日休息 |