6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Nerd Font】はじめまして、フォントパッチャー

6
Posted at

「好みのフォントを使いたいけど、なんかターミナルで絵文字が文字化けするんだよね。」

今回はそんなあなたにお届け。

対象読者

  • 好きな日本語フォントを使いたいけど、Nerd Font版が公式配布されていない。
  • ターミナルやエディタ(vim等)でアイコンが□表示されるのに耐えれない。
  • brew install fontforge~1GB 相当入れるのは嫌だ。

きっかけ

昨年9月にリリースされた、MintMonoというフォントを普段の開発で利用させていただいているのですが。

僕の作業場である、 Alacritty / Neovim / Starship 等で一部の文字(主にアイコン)が文字化けしてたんですよね。

ちなみに。
Ghostty や Wezterm などでは、フォント描画時に文字化けがあった場合に自動でフォールバックしてくれる機能が内包されているようで。

どちらも試してみたんですが、動作が少し重く感じたり、アプリ自体の便利なショートカットキーが自分の開発スタイル(特にtmuxとの干渉など)と合わなかったりしたんですよね。
※ この辺りの話は気が向けば別で記事にしようと思います。

って背景があって、「Alacrittyじゃないと僕開発できません。」って気持ちを抱えていました。

じゃあ、こういう時どうするの?

せっかくならみなさんもお気に入りのフォントで開発したいのでは...?
(あんまみんなこだわらないんですかね?よくわかりませんが。)

一時期は Mint Mono を妥協して、他のフォントで代替しようかな、と他フォントを探してた時期もあったんですが...。

他のフォントだとどうも読みづらくて、開発のスピードがでない...。
※ ツール依存ですね。ダメだなぁとは感じてました。

で、いろいろ調べてたら、いくつか対応方法あるみたいで。

  1. NerdFont化(パッチを当てる)
  2. 違うフォントを探す
  3. GhosttyやWeztermに乗り換える

主に上記の3つの方法があるようです。

※ 「違うフォントを探す」方と、「GhosttyやWeztermに乗り換える」方はここで離脱して下さい。この記事では対応方法について言及しません。

では、次のセクションから 非 NerdFont の NerdFont化をご紹介しますね。

前提

いろいろな方法ありますが、この記事では Dockerを使った方法 をご紹介します。
(掃除が一番楽そうな方法 🌟)

私の検証した環境です。

  • macOS (Apple Silicon)
  • Docker 動作環境(colima)
  • gh cli(無ければ手動 DL で可)
  • unzip

※ 他のOSでは試してません。おそらくDockerさえあればどうにか Try and Error で行ける方法かと。

補足: FontForge を直接インストールする方法

FontForgeを活用する方法だと以下で出来るみたいです。
※ 試してない。だってfontforge重いから。

brew install fontforge
git clone https://github.com/ryanoasis/nerd-fonts.git
cd nerd-fonts
./font-patcher /path/to/font.ttf --complete --mono

NerdFontの公式Dockerイメージを使えば、以下のメリットがあります。

  • ホスト側に FontForge を入れずに済みます。
  • brew を入れてない人だっているんだもの。
  • パッチが終わった後のゴミ掃除が簡単。

手順

1. 作業ディレクトリ作成 & フォント取得

mkdir -p ~/tmp/mintmono-nf && cd ~/tmp/mintmono-nf

gh release download v0.0.1 --repo yuru7/mint-mono \
  --pattern 'MintMono_*.zip' --dir .

unzip -o MintMono_*.zip

やってること

  1. 作業ディレクトリを作成して移動。
  2. Github Release からzip取得
  3. 解凍

やーっぱ gh cli 最強ですよね。

この段階での作業ディレクトリの中身

Mint Mono には 通常版 と 35版(全角:半角 = 3:5、半角がやや広く日本語がコンパクト)が含まれます。

中身はこんな感じ。

MintMono_v0.0.1/
├── MintMono/
│   ├── MintMono-Regular.ttf
│   ├── MintMono-Bold.ttf
│   ├── MintMono-Italic.ttf
│   └── MintMono-BoldItalic.ttf
└── MintMono35/
    ├── MintMono35-Regular.ttf
    └── ...

2. パッチャイメージをプル

docker pull nerdfonts/patcher

初回で ~1GB です。

後で docker rmi で消せるので気にしないで。

公式イメージに使い方書いてますので、気になる方は参照下さい。

3. パッチ実行

あとちょっとで終わります。

mkdir -p out
docker run --rm \
  -v "$PWD/MintMono_v0.0.1/MintMono:/in" \
  -v "$PWD/out:/out" \
  nerdfonts/patcher \
  --complete --mono --careful

ちょっと解説。

  • --complete
    全アイコンを詰め込む(部分で良ければ --fontawesome --octicons --powerline のように個別指定)
  • --mono
    等幅維持(ターミナル用)
  • --careful
    元フォントのグリフを上書きしない(日本語グリフを守る)

成功すると out/ に 4つの .ttf が生成されます。

MintMonoNerdFontMono-Regular.ttf
MintMonoNerdFontMono-Bold.ttf
MintMonoNerdFontMono-Italic.ttf
MintMonoNerdFontMono-BoldItalic.ttf

4. インストール(macOSの場合)

cp out/*.ttf ~/Library/Fonts/

FontBookアプリを開いて、「MintMono Nerd Font Mono」で検索すればヒットするはず。

5. Alacritty設定

説明不要かもですが一応。

alacritty.toml
[font]
normal = { family = "MintMono Nerd Font Mono", style = "Regular" }
bold = { family = "MintMono Nerd Font Mono", style = "Bold" }
italic = { family = "MintMono Nerd Font Mono", style = "Italic" }
bold_italic = { family = "MintMono Nerd Font Mono", style = "Bold Italic" }

6. 検証

echo -e "\uf007 \uf121 \uf0e7 \ufb2b \ue7a8"

四角が出たらどこかで失敗です。
アイコンが出れば成功です!!

7. 片付けしましょう

rm -rf ~/tmp/mintmono-nf          # 作業物 ~90MB
docker rmi nerdfonts/patcher      # イメージ ~1GB

注意点

ちょっとおかたい話ですが、ライセンスは守りましょうね。

フォントの規約をちゃんと確認してくださいね。

一応ですが。
基本、dotfilesなどリポジトリに ttf をコミットするのは非推奨かと。

  • binaryをgit管理すること自体そもそも意味不明
  • dotfiles の目的は「設定」です。「成果物」ではありません。(意見分かれそうな言及ですが...)

ビルドスクリプトあるので dotfiles 見に来て下さい

私は dotfiles にビルドスクリプト入れちゃいました。

ぜひ見に来て下さい。

まとめ

ちなみにこの記事も、Neovim x MintMono で書いてたんですけど、
気に入ってるフォントだとやっぱ楽しく文章かけますね♪

ここまで読んでいただきありがとうございます。

6
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
6
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?