# 如何使用中文字体 Windfonts ？

文风字体（Windfonts）是文派开源的 WordPress 中国生态基础项目之一，目前已在文派叶子 🍃（WP-China-Yes）中集成，可以直接使用。

一、安装插件

通过本站或者网络下载到 [文派叶子 🍃（WP-China-Yes）](https://wpcy.com/download)最新版本；启用后可以看到文风字体设置选项。

<figure class="wp-block-image size-large wp-lightbox-container" id="bkmrk-">![](https://wpcy.com/wp-content/uploads/2024/09/2024-9-11-130409-943x1024.webp)</figure>[文风字体（Windfonts）](https://windfonts.com/)为您的网站增添无限活力。专为中文网页设计，旨在提升用户阅读体验和视觉享受

开启文风字体定制选项后，可以选择使用范围和实现效果。

- 全局启用
- 前台启用
- 本机字体
- 不启用

【全局启用】就是在前后台均可显示文风字体，如果使用的是个性字体那么建议是采用【前台启用】就可以满足大部分使用场景。

【本机字体】是使用的统一中文字体 fonts.css 文件实现，无需加载外部的字体文件，而是完全调用用户电脑中的字体。

二、获取字体

不同的字体文件需要通过 [Windfonts 在线字体平台 <sup>↗</sup>](https://app.windfonts.com/)获取。

<figure class="wp-block-image size-large" id="bkmrk--1">![](https://wpcy.com/wp-content/uploads/2023/08/Screenshot-2024-09-17-at-17-44-55-1024x720.webp)</figure>进入到文风字体平台后，选择需要的字体效果，然后点击【获取嵌入代码】，找到对应的免费字体嵌入代码：

- 字体家族名称：填入从文风字体获取的字体家族名称
- 字体链接：填入从文风字体获取的字体 CSS 链接
- 字体字重：设置字体权重大小（字体粗细）
- 字体样式：设置字体样式（正常、斜体、倾斜）
- 字体应用：设置字体应用的元素（CSS 选择器）
- 启用字体：是否启用该字体

三、设置字体 CSS

这里我们以Google版的思源黑体为例，将代码放入你的 &lt;head&gt; 标签内即可使用。

完整代码如下：

```
<link rel="preconnect" href="https://cn.windfonts.com" /><br></br><link rel="stylesheet" type="text/css" href="https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css" /><br></br><!-- 此中文网页字体由文风字体（Windfonts）免费提供，您可以自由引用，请务必保留此授权许可标注 https://wenfeng.org/license --> 
```

- 字体家族名称：wenfeng-syhtcjk
- 字体链接：[https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css](https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css)
- 字体字重：保持默认
- 字体样式：保持默认
- 字体应用：自行填入，常用的标题标签为 h1,h2,h3,h4,h5,h6
- 启用字体：默认启用

当使用文派叶子插件时，只需要复制字体链接即可如：

```
https://cn.windfonts.com/wenfeng/fonts/syhtcjk/regular/web/index.css
```

插件内已经添加了字体授权标注，无需重复添加。

保存刷新前台页面后，就可以看到字体的应用效果。此为文风字体 Windfonts 的自建中文网络字体源站，您可以免费使用。

---