前言

修改下文章字体，感谢阿里妈妈刀隶体~

开整

下载喜欢的字体

找到你喜欢的字体，如本文采用 阿里妈妈刀隶体

下载字体，本文下载和使用 AlimamaDaoLiTi.woff2

加入到 Hugo 主题中

以 zozo 主题为例子

添加字体文件

将字体文件引入到 themes > zozo > static > fonts 目录下（如果没有目录自行新建）

新建 fonts.css 文件

在 themes > zozo > static > css 目录下新建 fonts.css 文件，并添加内容

@font-face {
    font-family: AlimamaDaoLiTi;
    src: url("../fonts/AlimamaDaoLiTi.woff2") format('woff2');
}

添加 fonts.css 到文章模板中

在 themes > zozo > layouts > partials 的 head.html 文件中添加 fonts.css

<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" />
<!-- 新添加的位置 -->
<link rel="stylesheet" type="text/css" media="screen" href="{{ "css/fonts.css" |absURL }}" />
<link rel="stylesheet" type="text/css" media="screen" href="{{ "css/zozo.css" |absURL }}" />

修改文章字体

在 themes > zozo > static > css 目录下的 zozo.css 文件中 body 中修改 font-family，添加 AlimamaDaoLiTi

body {
  color: #333333;
  font-family: AlimamaDaoLiTi, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 18px;
  width: 100%;
  background-color: #f7f7f7;
  margin: 0;
  padding: 0;
}

发布

提交主题修改和发布博客即可。