HEXO の表示フォントを変更

HEXO の icarus テーマでフォントを変更してみたくなったのでやってみました。

icarus のテーマインストール時の標準フォントは、Microsoft YaHei (微軟雅黒)という中国語簡体字のフォントになっていて、日本語の字体とは少し異なっていてやはり読みにくい。かわいいけどね。
なので、日本語のフォント、最近では標準的な(と自分は思ってる) Google Fonts の Noto Sans JP に変更してみました。

変更箇所は2箇所、CSSの指定のところと、Google Fontsの読み込みフォントの指定のところです。

themes\icarus\include\style\base.styl の9行目あたりでフォント名を指定。

base.styl
1
2
$family-sans-serif ?= 'Noto Sans JP', 'Open Sans',  sans-serif
$family-code ?= 'Source Code Pro', monospace, 'Noto Sans JP'

themes\icarus\layout\common\head.jsx の56行目あたりで、読み込みフォントの指定。

head.jsx
1
2
3
4
const fontCssUrl = {
default: fontcdn('Noto+Sans+JP:wght@300;400;500&family=Open+Sans:wght@300;400;500;600;700', 'css2'),
cyberpunk: fontcdn('Oxanium:wght@300;400;600&family=Roboto+Mono', 'css2')
};
bash
1
2
3
$ hexo clean
$ hexo generate
$ hexo deploy

で、変更されるはず。
deploy してもなかなか反映されなかったんだけど、キャッシュなのかそれともCSSの書き出しに条件があるのかわからなかったけど、とりあえず何度かしてみたら反映されました。
:D

※ 参考にしたページはこちらです。
可以更换一下代码的字体吗?
https://github.com/ppoffice/hexo-theme-icarus/discussions/913
Hexoのicarusテーマのフォントの変え方
https://omathin.com/icarus-theme-change/


Author

FEN

Posted on

2022-03-07

Updated on

2023-09-24

Licensed under

コメント