如何添加WordPress谷歌字体？字体怎么改？

小老鼠

发布时间：2025-08-30 09:44:01

480人浏览过

来源于php中文网

原创

答案：在WordPress中添加谷歌字体可通过插件或手动代码实现，推荐使用OMGF等插件简化操作并优化性能。

如何添加wordpress谷歌字体？字体怎么改？

在WordPress里添加谷歌字体，并调整网站字体，主要有两种路径：你可以选择使用插件来简化操作，这对于不熟悉代码的用户来说非常友好；或者，如果你更喜欢掌控细节，也可以通过手动编辑代码的方式来实现。无论哪种方式，最终目的都是让你的网站在视觉上更符合品牌形象，也更具吸引力。

解决方案

说实话，每次我给客户或者自己的新项目选字体时，谷歌字体几乎都是首选。它库大、免费、性能优化得也不错。在WordPress里用它，我通常会看情况选择插件还是手动。

方法一：使用插件（推荐给大多数人）

这是最省心的方式，尤其适合那些对代码不太感冒的朋友。市面上有很多优秀的插件可以帮你搞定。

安装并激活插件：
- 我个人比较推荐像 OMGF (Optimize My Google Fonts) 或者 Google Fonts Typography 这类插件。前者专注于性能优化，能把谷歌字体下载到你的服务器上，减少外部请求；后者则提供了更直观的界面来选择和应用字体。
- 在WordPress后台，进入“插件” -> “安装插件”，搜索你想要的插件，点击“现在安装”并“启用”。
配置插件并选择字体：
- 激活后，通常插件会在“外观”或“设置”菜单下出现自己的选项。
- 进入插件设置界面，你会看到一个谷歌字体库的列表。浏览、预览，然后选择你喜欢的字体。
- 通常，插件会让你选择字体的粗细（Regular, Bold, Light等）和样式（Italic）。别贪多，只选你真正会用到的，这关系到网站加载速度。
- 然后，插件会提供选项让你把这些字体应用到网站的不同元素上，比如“标题”（H1-H6）、“正文”、“菜单”等等。直接在下拉菜单里选择即可。
- 别忘了保存更改。

方法二：手动添加代码（适合进阶用户或有特殊需求）

如果你想更精细地控制字体加载，或者不想额外安装插件，手动添加是个不错的选择。

从Google Fonts获取代码：
- 访问 fonts.google.com。
- 选择你想要的字体，点击“+ Select this style”来添加你需要的字体样式和粗细。
- 在右侧边栏（或者点击右上角的“View selected families”），你会看到一个“Use on the web”区域。这里通常会提供两种引入方式：
  标签和
```
@import
```
  规则。
- 我一般倾向于使用
  标签，因为它通常被认为加载效率更高。复制这段HTML代码。
将字体引入WordPress：
- 最佳实践（通过
```
functions.php
```
  ）：这是最推荐的方式，因为它能确保字体在正确的位置加载，并且避免主题更新时丢失更改。
  - 登录你的WordPress后台，进入“外观” -> “主题文件编辑器”（或者通过FTP/SFTP连接到你的服务器，找到当前主题的
```
functions.php
```
    文件）。
  - 在
```
functions.php
```
    文件的末尾（在
```
?>
```
    之前，如果存在的话），添加以下代码片段。你需要把
```
YOUR_GOOGLE_FONT_LINK
```
    替换成你从Google Fonts复制的
    标签的
```
href
```
    属性值。
```
function my_theme_google_fonts() {
    wp_enqueue_style( 'google-fonts', 'YOUR_GOOGLE_FONT_LINK', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_theme_google_fonts' );
```
  - 例如，如果你的链接是
```
https://fonts.googleapis.com/css2?family=Open+Sans&display=swap
```
    ，那么
```
YOUR_GOOGLE_FONT_LINK
```
    就是这个完整的URL。
- 另一种方式（通过
```
style.css
```
  ）：如果你只是想快速测试，或者你的主题没有提供方便的
```
functions.php
```
  编辑入口，也可以直接在主题的
```
style.css
```
  文件顶部使用
```
@import
```
  规则。
  - 进入“外观” -> “主题文件编辑器”，选择
```
style.css
```
    文件。
  - 在文件的最顶部添加你从Google Fonts复制的
```
@import
```
    规则。
  - 比如：
```
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
```
应用字体到你的网站元素（通过自定义CSS）：
- 字体引入后，你需要告诉浏览器哪些元素使用这些字体。
- 进入“外观” -> “自定义” -> “额外CSS”（或“自定义CSS”）。
- 在这里，你可以编写CSS规则来应用字体。例如：
```
body {
    font-family: 'Open Sans', sans-serif; /* 应用到正文 */
}

h1, h2, h3 {
    font-family: 'Roboto', sans-serif; /* 应用到标题 */
}

/* 如果你只想改变特定段落的字体 */
.my-custom-class p {
    font-family: 'Lato', sans-serif;
}
```
- 记得将
```
'Open Sans'
```
  或
```
'Roboto'
```
  替换成你实际引入的字体名称。
```
sans-serif
```
  是一个备用字体，以防你的主字体加载失败。

最后一步，无论哪种方式： 清除你网站上的所有缓存（主题缓存、插件缓存、CDN缓存），然后刷新页面，看看效果。

为什么我的WordPress网站加载谷歌字体后变慢了？如何优化性能？

这几乎是每个WordPress用户都会遇到的“甜蜜的烦恼”——好看的字体总要付出点性能代价。我见过太多网站，因为字体加载不当，导致LCP（最大内容绘制）分数一塌糊涂。其实，谷歌字体本身是为性能优化过的，但我们引入的方式和数量，才是影响速度的关键。

首先，你要明白，每次你的网站请求一个谷歌字体，浏览器都要向谷歌的服务器发送一个请求，下载字体文件。如果请求太多，或者字体文件太大，那肯定会拖慢速度。

优化策略，我通常会这么做：

本地托管字体 (Self-Host Google Fonts)： 这是我最推荐的方式。
- 原理： 把谷歌字体文件下载到你自己的服务器上，这样浏览器就不用再向谷歌发送请求了，所有资源都从你的服务器加载，减少了DNS查询和外部连接的开销。
- 实现：
  - 使用插件： 像前面提到的 OMGF 插件，它的主要功能就是帮你自动下载并本地托管谷歌字体，还能自动帮你生成CSS，甚至预加载。非常省心。
  - 手动： 你也可以通过像 Google Webfonts Helper 这样的在线工具，下载字体文件（WOFF2是首选格式），然后通过FTP上传到你的主题文件夹，再用
```
@font-face
```
    规则在CSS中引入。这个过程稍微复杂一点，但控制力最强。
限制字体数量和样式：
- 少即是多： 我发现很多网站设计师喜欢用好几种字体，每种字体还加载好几个粗细（Regular, Bold, Italic, Bold Italic...）。这无疑增加了加载负担。
- 我的建议： 通常，一个网站有2-3种字体就足够了（比如一个标题字体，一个正文字体，可能再加一个强调字体）。每种字体只加载你真正会用到的粗细和样式。比如，如果你的正文只用Regular和Bold，就不要加载Light或Black。
使用
```
font-display: swap;
```
：
- 这是一个CSS属性，它告诉浏览器，如果字体文件还没加载好，就先用系统默认字体显示文本，等字体加载好了再“交换”过来。
- 好处： 避免了FOIT（Flash of Invisible Text，文本不可见），提升了用户体验，让用户能更快地看到内容，而不是盯着空白页面等字体。
- 实现： 如果你用插件，很多插件会自带这个选项。如果是手动引入，确保你的
  标签或
```
@import
```
  规则里包含了
```
&display=swap
```
  ，或者在你的
```
@font-face
```
  规则里添加
```
font-display: swap;
```
  。
预加载 (Preload) 关键字体：
- 如果你网站的首屏内容使用了某种特定的谷歌字体，你可以告诉浏览器“嘿，这个字体很重要，赶紧加载！”
- 实现： 在你的
```
functions.php
```
  中，或者通过插件（如WP Rocket等性能优化插件通常有这个功能），添加
```
rel="preload"
```
  属性的
  标签。
- 示例代码（添加到
  functions.php
  ）：
```
function add_google_font_preload() {
    echo '';
}
add_action( 'wp_head', 'add_google_font_preload' );
```
  - 注意：
```
href
```
    路径需要是你实际使用的字体文件的URL，并且你需要为每个字体文件（不同粗细和样式）分别添加一个preload标签。预加载太多反而会拖慢速度，只预加载首屏关键字体。
使用CDN (Content Delivery Network)：
- 虽然谷歌字体本身就是通过CDN分发的，但如果你把字体本地托管了，再配合你网站自己的CDN，效果会更好。CDN能把你的字体文件分发到离用户最近的服务器，加快加载速度。

总的来说，性能优化是一个持续的过程。我的经验是，先从本地托管和限制字体数量入手，通常就能解决大部分问题。

在WordPress中，除了谷歌字体，还有哪些字体选择？自定义字体怎么上传？

说实话，虽然谷歌字体很香，但有时候项目要求或者设计风格需要更独特的选择。我遇到过不少情况，客户就是想要一个非常特定的、市面上不常见的字体。这时候，我们就得跳出谷歌字体的舒适区了。

除了谷歌字体，你还有这些选择：

Text-To-Song

免费的实时语音转换器和调制器

下载

系统字体（Web-Safe Fonts）：
- 这是最基础、最快速的字体选择。它们是用户操作系统自带的字体，比如 Arial, Helvetica, Times New Roman, Georgia, Verdana等。
- 优点： 无需下载，加载速度飞快，兼容性极好。
- 缺点： 选择少，缺乏个性和设计感。通常作为备用字体使用。
- 用法： 直接在CSS中指定，例如
```
font-family: Arial, sans-serif;
```
Adobe Fonts (Typekit)：
- 如果你是Adobe Creative Cloud的用户，那么Adobe Fonts是一个非常强大的字体库。它提供了数千种高质量的商业字体。
- 优点： 字体质量高，选择丰富，商业授权方便。
- 缺点： 需要付费订阅Adobe Creative Cloud。
- 用法： 在Adobe Fonts网站上选择字体，然后获取嵌入代码，通过WordPress插件或手动添加到主题的
```
functions.php
```
  中，再用CSS应用。
自定义字体（Self-Hosted Custom Fonts）：
- 这是指你购买或获得授权的字体文件（如OTF, TTF, WOFF, WOFF2格式），然后自己上传到服务器上使用。
- 优点： 极高的自由度，可以使用任何你想要的字体，完全掌控加载和性能。
- 缺点： 需要自己处理字体文件、格式转换、CSS
```
@font-face
```
  规则，以及版权问题。

自定义字体怎么上传和使用？

如果你决定使用自定义字体，通常有以下几种方法：

使用主题自带的字体上传功能：
- 很多现代WordPress主题（尤其是那些功能丰富的多用途主题，如GeneratePress, Astra Pro, Kadence等）都内置了自定义字体上传功能。
- 步骤： 通常在“外观” -> “自定义” -> “排版”或“字体”设置中，你会找到一个“上传自定义字体”的选项。
- 你需要上传不同格式的字体文件（WOFF2, WOFF, TTF等），以确保最大兼容性。主题会自动为你生成
```
@font-face
```
  规则。
- 这是最简单、最推荐的方式，因为它把所有复杂性都封装好了。
使用插件上传自定义字体：
- 如果你的主题没有这个功能，可以考虑使用插件，比如 Custom Fonts 或 Use Any Font。
- 步骤： 安装并激活插件后，它们通常会在后台提供一个界面，让你上传字体文件。插件会处理好
```
@font-face
```
  规则，并让你在主题自定义器或块编辑器中选择这些字体。
- 这类插件通常会要求你上传多种字体格式，以确保在不同浏览器上的兼容性。
手动上传并添加CSS
```
@font-face
```
规则：
- 这是最“硬核”的方法，但也是最灵活的。我个人在做一些高度定制的项目时，经常会用到这个。
- 准备字体文件：
  - 首先，确保你有字体文件的授权。
  - 你需要将字体文件转换为多种Web格式，以确保最佳兼容性和性能。主要格式有：
    - WOFF2 (Web Open Font Format 2.0)： 压缩率最高，支持最好，优先使用。
    - WOFF (Web Open Font Format)： 广泛支持，次优选择。
    - TTF (TrueType Font) / OTF (OpenType Font)： 原始字体格式，文件较大，作为备用。
    - EOT (Embedded OpenType)： 针对老旧IE浏览器，现在基本可以忽略。
  - 你可以使用像 Font Squirrel's Webfont Generator 这样的在线工具来帮你转换字体文件。
- 上传字体文件：
  - 通过FTP/SFTP连接到你的服务器，将转换好的字体文件上传到你主题的一个子文件夹中，比如
```
wp-content/themes/your-theme/fonts/
```
    。
- 添加
```
@font-face
```
  CSS：
  - 在你的主题的
```
style.css
```
    文件（或者通过“外观” -> “自定义” -> “额外CSS”）中，添加
```
@font-face
```
    规则。
  - 示例：
```
@font-face {
    font-family: 'MyCustomFont'; /* 给你的字体起个名字 */
    src: url('path/to/fonts/MyCustomFont-Regular.woff2') format('woff2'),
         url('path/to/fonts/MyCustomFont-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* 推荐加上，优化加载体验 */
}

@font-face {
    font-family: 'MyCustomFont';
    src: url('path/to/fonts/MyCustomFont-Bold.woff2') format('woff2'),
         url('path/to/fonts/MyCustomFont-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
```
    - 注意：
```
path/to/fonts/
```
      需要替换成你实际上传字体文件的相对路径。
- 应用字体：
  - 一旦
```
@font-face
```
    规则定义好，你就可以像使用谷歌字体一样，通过
```
font-family: 'MyCustomFont', sans-serif;
```
    来应用它了。

无论你选择哪种方式，记住一点：字体文件的版权和授权非常重要，确保你使用的字体是合法的。

WordPress字体修改后不生效怎么办？如何调试字体问题？

我敢说，每个做WordPress的人，都遇到过字体改了半天不生效，或者生效了但效果不对的情况。这感觉就像在玩一个“找茬”游戏，但往往问题出在一些很基础的地方。调试字体问题，其实就是一步步排除可能性。

字体修改不生效的常见原因（我个人总结的“坑”）：

缓存问题：
- 这几乎是WordPress所有修改不生效的首要原因。你的浏览器、WordPress缓存插件（如WP Rocket, LiteSpeed Cache, SG Optimizer等）、CDN（如Cloudflare）都可能缓存了旧的CSS文件。
- 解决方案： 强制刷新浏览器（Ctrl+F5 或 Cmd+Shift+R），然后清除所有能清除的缓存：WordPress后台的缓存插件、服务器缓存（如果你有）、CDN缓存。
CSS选择器优先级（Specificity）问题：
- 这是最常见的CSS问题。你的CSS规则可能被主题或插件的其他CSS规则覆盖了。CSS有严格的优先级规则，更具体的选择器（如
```
#id
```
  >
```
.class
```
  >
```
element
```
  ）或者后加载的CSS会覆盖先加载的。
- 解决方案：
  - 使用浏览器开发者工具（F12）检查元素。看看你的字体规则是否被应用，或者被哪个规则划掉了。
  - 尝试使用更具体的选择器。例如，如果你想改变所有
```
p
```
    标签的字体，但主题有一个更具体的
```
.entry-content p
```
    规则，那你的
```
p { font-family: ...; }
```
    可能就不生效。你需要写成
```
.entry-content p { font-family: ...; }
```
    。
  - 慎用
    !important
    ：这是一个强行提高优先级的“核武器”，比如
```
font-family: 'MyFont' !important;
```
    。虽然能解决燃眉之急，但滥用会导致CSS难以维护，建议作为最后的手段。
字体文件加载失败：
- 如果字体文件本身就没有正确加载，那自然不会显示。
- 解决方案：
  - 打开浏览器开发者工具，切换到“网络”（Network）标签页。刷新页面，然后筛选“字体”（Fonts）。
  - 检查是否有字体文件显示404错误（Not Found）。这通常意味着你的字体路径错了，或者文件没有上传成功。
  - 检查字体文件的MIME类型是否正确。服务器配置不当可能导致字体文件无法正确传输。
```
@font-face
```
规则错误或字体名称不匹配：
- 手动添加自定义字体时，
```
@font-face
```
  规则写错了，或者你应用字体时
```
font-family
```
  的值与
```
@font-face
```
  中定义的
```
font-family
```
  不一致。
- 解决方案： 仔细检查你的
```
@font-face
```
  规则，确保
```
font-family
```
  名称、
```
src
```
  路径和
```
format
```
  都正确无误。然后确保你应用字体时使用的
```
font-family
```
  名称是完全一致的。
主题或页面构建器设置覆盖：
- 很多主题和页面构建器（如Elementor, Divi, Beaver Builder）都有自己的排版设置，这些设置通常会生成内联CSS或者优先级很高的CSS，