Source Han Code JP（源ノ角ゴシック Code JP）フォントをMac OSに入れてVisual Studio Codeに設定する

サマリ

• Visual Studio CodeでSource Han Code JPというフォントを使ってみることにしました。
• Source Han Code JPをMac OSにインストールしてVisual Studio Codeに適用する手順とわかったことを紹介します。

Source Han Code JPとは

Adobeのオープンソースプロジェクトで開発されている等幅フォント。リポジトリはこちら。
同じくAdobeのオープンソースプロジェクトで開発されている2つのフォントを組み合わせて開発されている。

Source Han Code JP（日本語メニューネーム：源ノ角ゴシック Code JP）は、Source Han Sansに含まれるプロポーショナル・ラテン・グリフを、Source Code Proのモノスペースのラテン・グリフに変更した派生フォントです。ラテン・グリフは、日本語の仮名や漢字とマッチするようにサイズを調整し、正確に667ユニット固定字幅に設定されています。

引用元：Source Han Code JP https://github.com/adobe-fonts/source-han-code-jp/blob/master/README-JP.md （検索日：2019年10月3日）

今回リポジトリの上記文を読んではじめて知ったのですが、フォントも適切にモジュール化して開発されているんですね。

試した環境

• OS: Mac OS 10.14.6
• Visual Studio Code 1.38.1

インストールと設定

フォントのインストール

リポジトリにあるダウンロードページのリンクの先からファイルを取ってきます。
zipとtar.gzの2種類ありますが、今回はzipをとってきました。

ファイルを置いてあるディレクトリに移動して解凍します。

MacBook-Pro-2:source-han-code-jp vaivailx$ unzip source-han-code-jp-2.011R.zip
Archive:  source-han-code-jp-2.011R.zip
a671f9c6b3a4af43a23c0e8e2044b7dbac71f31d
   creating: source-han-code-jp-2.011R/
  inflating: source-han-code-jp-2.011R/LICENSE.txt
   creating: source-han-code-jp-2.011R/OTC/
  inflating: source-han-code-jp-2.011R/OTC/SourceHanCodeJP.ttc
   creating: source-han-code-jp-2.011R/OTF/
  inflating: source-han-code-jp-2.011R/OTF/SourceHanCodeJP-Bold.otf
...

解凍したファイルの中にOTFディレクトリがあるので、それをフォント用のディレクトリに置きます。
（※似た名前でOTCディレクトリがありますが、これはTrueTypeフォントのディレクトリなので注意。）
フォント用のディレクトリに置くことで、各アプリケーションでフォントを利用できます。
ディレクトリは以下2つあるようですが、今回はユーザー単位でのインストール用に置きます。

• ユーザー単位でインストール用のディレクトリ：~/Library/Fonts
• システム全体にインストール用のディレクトリ：/System/Library/Fonts

MacBook-Pro-2:source-han-code-jp vaivailx$ cd source-han-code-jp-2.011R
  MacBook-Pro-2:source-han-code-jp-2.011R vaivailx$ ll
total 48
-rw-r--r--@  1 vaivailx  staff  4301  4 18  2018 LICENSE.txt
drwxr-xr-x@  3 vaivailx  staff    96  4 18  2018 OTC
drwxr-xr-x@ 16 vaivailx  staff   512  4 18  2018 OTF
-rwxr-xr-x@  1 vaivailx  staff  1477  4 18  2018 README-JP.md
-rwxr-xr-x@  1 vaivailx  staff  1230  4 18  2018 README.md
-rw-r--r--@  1 vaivailx  staff  7264  4 18  2018 relnotes.txt
MacBook-Pro-2:source-han-code-jp-2.011R vaivailx$ mv ./OTF ~/Library/Fonts
MacBook-Pro-2:source-han-code-jp-2.011R vaivailx$ ll ~/Library/Fontstotal 0
drwxr-xr-x@ 16 vaivailx  staff  512  4 18  2018 OTF

これでフォントがインストールされたはずだが、確証がほしい。。

そこで、インストールされているか調べる方法をググってみると、
インストールされているかは、FontBook.appというmac標準のアプリケーションで確認できることがわかりました。
このアプリケーションを起動してみると、ユーザーの項目に日本語メニューネームの「源ノ角ゴシック Code JP」という項目があります。インストールされてますね。

あとFontBook.appのファイルメニューを見ると、このアプリケーションでフォントの追加もできるよう。
次からはわざわざコマンド使わなくて良さそうです。。

Visual Studio Codeにフォントを適用する

設定画面を開いて以下の設定をします。（Macなら"⌘ + ,"で開きます）
Font Familyと検索キーワードを入れると設定項目が表示されます。
注意すべき点は、ここは「Source Han Code JP」と記述しないといけません。

「源ノ角ゴシック Code JP」では反映されませんでした。

推測ですが、「源ノ角ゴシック Code JP」はメニューネームと書かれていたので、あくまで表示用であり、アプリケーションに設定するときは正式名を入れる必要があるのだと思います。日本語メニューネームがある他のフォントを設定するときもFontBook.appで表示されている名称をそのまま使っても適用されないかもしれません。ではフォント名はどこから調べればいいのか？とFontBook.appを少し触ってみましたがわかりませんでした。インストールしたら正式名がわかるようになっていてもよさそうですが。。
教えて偉い人！！

まとめ

• Source Han Code JP（日本語メニューネーム：源ノ角ゴシック Code JP）をコマンドでファイル操作してインストールした。
• インストールできたかの確認にはMac標準アプリケーションのFontBook.appが使える。
• そもそもMacでフォントの管理はFontBook.appでできる。
• FontBook.appでは「源ノ角ゴシック Code JP」と表示されるがVisual Studio Codeに設定するときは「Source Han Code JP」と設定する。（おそらく他のアプリも同じ）