# 自托管切片与 WordPress 主题

> 适合谁看：想把字体文件放在自己服务器上、不从文风加载的开发者和 WordPress 主题作者。

## 什么时候自托管

- 内网系统、离线环境，访问不到外部地址。
- 对第三方请求有严格要求的站点。
- 想把字体和主题一起打包发布。

其他情况直接引用文风的 CSS 更省事，见[《快速开始：一行代码用上中文网页字体》](https://docs.cocobook.com/link/647)。

## 先确认许可允许

自托管等于你在自己的服务器上再分发字体文件。开源字体（OFL、Apache、MIT、IPA 等）一般允许；厂商的免费商用字体常常不允许单独再分发字体文件，或要求只能从官网下载。动手前先看许可原文，见[《这款字能不能商用：五步自查》](https://docs.cocobook.com/link/644)。

## 下载切片包

1. 打开 wenfeng.org 上这款字的条目页：`https://wenfeng.org/source/{目录名}/`，例如 [霞鹜文楷](https://wenfeng.org/source/xwwk/)。
2. 条目页写着「本站下载」的，可以领取「切片包」（woff2 + CSS）。写着「官方下载」「暂无下载」的，本站不提供切片包。
3. 解压后得到一个文件夹，里面有 `fonts.css` 和许多 woff2 文件。

下载状态的含义见[《下载原件和切片：什么能下、怎么用》](https://docs.cocobook.com/link/645)。

## 放进网站

**整个文件夹原样放进去，不要拆，不要改文件夹名。** `fonts.css` 用相对路径引用同目录下的 woff2，拆开或改名就找不到文件。

静态网站：

```html
<link rel="stylesheet" href="./fonts/wenfeng-xwwk/fonts.css">
```

然后在样式里写字体名。字体名以 `fonts.css` 里 `font-family` 的写法为准，打开文件看一眼再抄。

## WordPress 主题

把文件夹放进主题的 `fonts/` 目录，在主题的 `functions.php` 里排队引入：

```php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'wenfeng-xwwk',
        get_theme_file_uri( '/fonts/wenfeng-xwwk/fonts.css' ),
        array(),
        null
    );
} );
```

再在主题样式里给需要的元素设置 `font-family`。

不想改主题代码的站长，可以用 WordPress 插件在后台选字，见[《如何使用中文字体 Windfonts ？》](https://docs.cocobook.com/link/71)。

## 别删注释

`fonts.css` 开头有一行授权注释，请原样保留。见[《保留授权注释》](https://docs.cocobook.com/link/652)。

## 下载后核对文件

条目页给了 SHA-256 校验值时，下载后可以核对一下文件有没有被改过。方法见[《下载字体怎么避开山寨包和钓鱼站》](https://docs.cocobook.com/link/621)。

## 接下来读什么

- [《在 CSS 里使用：字体名、备用字体和多字重》](https://docs.cocobook.com/link/649)
- [《开发常见问题》](https://docs.cocobook.com/link/653)