---
title: Change Icarus Theme Font
date: 2024-07-24
excerpt: Icarus为Hexo的一款主题，本文介绍如何更换主题字体。
tags:
  - Blog
  - Web
  - Font
cover: https://assets.vluv.space/cover/FrontEnd/blog_font.webp
---

## Install font

选择心仪的字体，下载到本地。建议使用 woff2( Web Open Font Format 2.0) 格式

[ttf-to-woff2](https://cloudconvert.com/ttf-to-woff2)

> [!hint] WOFF2
> **Web Open Font Format 2**
> 定义：WOFF2 是 WOFF 的升级版，由 Mozilla、Microsoft、Google 和其他组织共同开发。它是一种专为网络传输设计的字体格式，旨在优化网络性能。
> 特点：
> 基于 TTF 或 OTF（OpenType Font）格式，但使用了更高效的压缩算法，比 WOFF 和原始 TTF/OTF 文件更小，从而减少加载时间。

## Modify theme files

### Add font files

在`<blog_root_folder>\themes\icarus\source\css\font`中创建文件夹，例如这里添加了`MapleFont`文件夹，并将下载好的字体文件(ttf,woff2,.etc)放入`MapleFont`文件夹中

```shell
╭───┬────────────────────────┬──────┬─────────┬────────────────╮
│ # │          name          │ type │  size   │    modified    │
├───┼────────────────────────┼──────┼─────────┼────────────────┤
│ 0 │ css\font\font.css      │ file │ 4.9 KiB │ 6 minutes ago  │
│ 1 │ css\font\fontawesome   │ dir  │     0 B │ 3 weeks ago    │
│ 2 │ css\font\MapleFont     │ dir  │ 4.0 KiB │ 19 minutes ago │
│ 3 │ css\font\sourcecodepro │ dir  │     0 B │ 3 weeks ago    │
│ 4 │ css\font\ubuntu        │ dir  │     0 B │ 3 weeks ago    │
╰───┴────────────────────────┴──────┴─────────┴────────────────╯

<blog_root_folder>/themes/icarus/source/css/font/MapleFont
-a--- 8.1M 24 Jul 17:22  MapleHand-Bold.woff2
-a--- 8.8M 24 Jul 17:22  MapleHand-Regular.woff2
-a---  58k  9 Jun 20:02  MapleMono-NF-CN-Regular.woff2
```

### Modify font.css

修改`font.css`，加入新字体的引用

[font-face syntax](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts#font-face_in_more_detail)

- `woff`: format("woff")
- `woff2`: format("woff2")
- `ttf`: format("truetype)
- `otf`: format("opentype")

```css
@font-face {
  font-family: "Maple Hand";
  font-style: normal;
  font-weight: 400;
  src: local("Maple Hand"),
    url(/css/font/MapleFont/MapleHand-Regular.woff2) format("woff2");
}

@font-face {
  font-family: "Maple Hand";
  font-style: normal;
  font-weight: 400;
  src: local("Maple Hand"),
    url(/css/font/MapleFont/MapleHand-Bold.woff2) format("woff2");
}

@font-face {
  font-family: "Maple Mono";
  font-style: normal;
  font-weight: 400;
  src: local("MapleMono"),
    url(/css/font/MapleFont/MapleMono-NF-CN-Regular.woff2) format("woff2");
}
```

### Modify base.styl

修改`theme\icarus\include\style\base.styl`,在`$family-sans-serif`和`$family-code`前面引用 font.css；

- `$family-sans-serif` 正文字体，在字体列表前面加入 Maple Hand
- `$family-code` 代码字体，在字体列表前面加入 Maple Mono

```styl
@import '../../source/css/font/font.css'

$family-sans-serif ?= Maple Hand,-apple-system,BlinkMacSystemFont,"Segoe UI Emoji","Segoe UI",Ubuntu,Roboto,'Open Sans',Oxygen-Sans,Cantarell,'Microsoft YaHei',sans-serif
$family-code ?= Maple Mono,Maple Hand,'Source Code Pro',Menlo,SFMono-Regular,Consolas,Roboto Mono,'Courier New',monospace,'Microsoft YaHei'
```