Tag: WordPress自定义字体

如何为你的 WordPress 主题添加自定义字体：完整指南
为你的 WordPress 主题添加自定义字体可以显著提升你网站的外观和感觉。自定义字体有助于建立品牌身份并提高可读性。本分步指南将向你展示如何使用各种方法将自定义字体添加到你的 WordPress 主题。

添加自定义字体到 WordPress 主题的步骤

第一步：安装并激活插件
1. 登录到你的 WordPress 仪表板。
2. 导航到插件 > 添加新插件。
在搜索栏中输入 Easy Google Fonts。点击插件旁边的 立即安装 按钮，然后点击激活。

第二步：配置插件
1. 在仪表板中导航到外观 > 自定义，然后点击排版。
你将看到配置字体的不同部分，包括标题、段落和其它元素。点击任一部分以打开其设置。从列表中选择你想使用的字体。该插件会从 Google Fonts 库中拉取字体。

第三步：发布更改

选择字体并自定义设置后，点击自定义器顶部的发布按钮以应用更改到你的网站。

使用其它方法添加自定义字体

除了使用插件，你还可以通过以下方法添加自定义字体：

方法一：使用 @font-face 在 WordPress 中添加自定义字体

这种方法适合那些不想依赖插件的用户。你可以直接在主题的 CSS 文件中使用 @font-face 规则来添加自定义字体。
1. 下载你想使用的字体文件，并将其上传到你的 WordPress 网站的 wp-content/themes/your-theme/fonts 文件夹中。
2. 打开你的主题的 style.css 文件，并添加以下代码：
```
@font-face { font-family: 'YourFontName'; src: url('fonts/YourFontFile.eot'); src: url('fonts/YourFontFile.eot?#iefix') format('embedded-opentype'), url('fonts/YourFontFile.woff2') format('woff2'), url('fonts/YourFontFile.woff') format('woff'), url('fonts/YourFontFile.ttf') format('truetype'), url('fonts/YourFontFile.svg#YourFontName') format('svg'); font-weight: normal; font-style: normal; }
```
1. 然后，在你的 style.css 文件中使用该字体：
```
body { font-family: 'YourFontName', sans-serif; }
```
方法二：使用 Google Fonts 手动添加字体
1. 访问 Google Fonts 网站，选择你想使用的字体。
1. 点击 选择此字体，然后复制生成的 <link> 标签。
2. 将这个 <link> 标签添加到你主题的 header.php 文件的 <head> 部分：
```
<link href="https://fonts.googleapis.com/css2?family=YourFontName&display=swap" rel="stylesheet">
```
1. 在你的 style.css 文件中使用该字体：
```
body { font-family: 'YourFontName', sans-serif; }
```
额外技巧：使用拖放页面构建器自定义页面

仅仅添加字体还不够，你可能还需要使用英雄图像、菜单和自定义布局来自定义页面。我们推荐使用拖放式 WordPress 页面构建器插件，如 SeedProd 或 Thrive Architect，它们可以帮助你创建带有精美自定义字体的页面。

结语

为你的 WordPress 主题添加自定义字体可以显著提升网站的外观和品牌身份。通过使用插件（如 Easy Google Fonts）或手动添加 @font-face 规则，你可以轻松在 WordPress 中实现字体自定义。
July 29, 2024
如何解决Elementor中自定义字体不显示问题
在使用Elementor编辑WordPress页面时遇到自定义字体不显示问题；是什么原因导致的，该怎么解决呢？

可能导致的原因及解决方案

缓存问题

导致这种问题有可能是缓存造成的。解决方法也比较简单：

清除缓存：
- 清除 WordPress 缓存插件）。
- 清除服务器端缓存。
- 清除浏览器的缓存。
- 清除所有缓存后，再次刷新看看。
- 如果浏览器的缓存没有完全清除，可以换其他的浏览器试试，或者用隐身模式浏览。
HTTP/HTTPS 不匹配

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

要重新上传字体文件：

1.从 WP Admin后端，找到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 策略；如果是托管类型的，可以让你购买服务器的云服务商去修改。

导入模板

如果导入的模板包含自定义字体，则需要手动添加自定义字体。模板字体不会自动导入。

所选字体粗细不可用

自定义字体可能不具有所有可用的字体粗细。如果在版式选项中选择特定的字体粗细，但你的自定义字体没有可用的特定粗细，那么可能根本不显示自定义字体。在这种情况下，要选择可用于自定义字体的不同字体粗细。如果不明白的可以咨询官方。

自定义代码无效

如果添加无效的自定义 CSS 或其他代码，可能会导致许多不同的显示问题，包括无法显示自定义字体。删除或修复不正确的代码以解决这个问题。

不包括所有字体变体

不同的设备/浏览器可能需要不同的字体变化。例如，如果 iOS 设备上未显示字体，要确保已上传所有字体变体，包括 .ttf .svg .woff .woff2 和 .eot

如果缺少任何变体，则可能会发生下面其中一种情况：
- 显示默认字体
- 文本不会出现在网站上
这种情况之所以会发生，是因为不同的浏览器在显示字体时会有所差异。为了确保在所有浏览器中都能呈现出一致的字体效果，需要添加所有字体的变体，这样才能实现全面的浏览器支持。
April 27, 2024