fgg blog

Add_and_test_custom_font

/posts/hugo101/2024-07-09-test_custom_font/ map[email:1522009317@qq.com name:fmh]

Linear regression:

$\text{You’ve got to draw the line somewhere.}$

You’ve got to draw the line somewhere. (system-font)

You’ve got to draw the line somewhere. (NerdFont 3270)

中文：你必须在某个地方把那条线给画出来。(京華老宋体)

实作过程：

hugo version: v0.128.2-de36c1a95d28595d8243fd8b891665b069ed0850+extended linux/amd64 BuildDate=2024-07-04T08:13:25Z VendorInfo=gohugoio

  1. 将本地字体文件复制到 static/fonts/

  2. 在 assets/css/ (或 static/css/) 创建文件 custom.css:

@font-face {
    font-family: '3270NerdFont';
    src: url('/fonts/3270NerdFont-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KingHwa_OldSong';
    src: url('/fonts/KingHwa_OldSong.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

.custom-en {
    font-family: '3270NerdFont';
}

.custom-zh {
    font-family: 'KingHwa_OldSong';
}

更多关于自定义字体的讨论，可参考这里: https://discourse.gohugo.io/t/how-to-add-custom-fonts-and-not-depend-on-google/34267/3

  1. 修改 config.toml：
[params]
    customCSS = ["css/custom.css"]
  1. 复制 themes/layouts/partials/head.html 到根目录
cp themes/layouts/partials/head.html ./layouts/partials/head.html
# Optional:
cp themes/layouts/partials/head-extra.html ./layouts/partials/head-extra.html

如果主题设计得足够好，通常会给一份 head-extra.html 用于定制化内容。 此时，只需要将相应配置加入到 head-extra.html 文件中，避免对 head.html 的打扰。

增加的相应内容是：

<!-- Other head content -->
{{- range .Site.Params.customCSS }}
<link rel="stylesheet" href="{{ . | relURL }}">
{{- end }}
  1. 使用自定义字体
You've got to draw the line somewhere. (system-font)

<span class="custom-en">You've got to draw the line somewhere. (NerdFont 3270)</span>

<span class="custom-zh">中文：你必须在某个地方把那条线给画出来。(京華老宋体)</span>