Source Han(源ノ)系フォントの選択とダウンロードガイド

Source Han Monoや源ノ角ゴシック、Source Code ProやSource Han Code…。Source Han系のフォントにはバージョンが色々ありすぎてわけが分からん!という方も多いのではないかと思います。

一体これらは何が違っていて何を選べばいいのか。

今回はフォント選択のヒントと、迷わないダウンロードの方法を提示できればと思います。フォント選択に迷っている方はまずこちらをご覧ください。

ご自分に必要なフォントがなんとなく判明したでしょうか?以下では一般用途、プログラミング用途でそれぞれフォントをダウンロード、インストールしていきます。

一般用途の場合

  • ブラウザやWordなど、アプリケーションのフォントを変更したい
  • 画像に埋め込むフォントとして使いたい

などの用途であれば、ゴシック体は「Source Han Sans」、明朝体は「source Han Serif」をダウンロードしましょう。

「源ノ角ゴシック」や「源ノ明朝」という名称はこれらのフォントの和名です。「源ノ角ゴシックが欲しいのにラインナップに無い!」という方も安心してください。

Source Han Sansをダウンロード、インストール

Sans、Serifとも大まかな流れは変わらないので、ここではゴシック体のSource Han Sansをダウンロード、インストールしていきます。まずはAdobe-FontsのGithubリポジトリにアクセス。

Adobe Fonts
Adobe Fonts has 38 repositories available. Follow their code on GitHub.

画面下側にそれぞれのリンクがあります。

どちらかを選んでクリックしましょう。クリックした先のページを下へスクロールすると、こんな画面になります。

「Latest release」をクリックして、最新版のページを開きます。

ここの「OTF」をクリック。

次の画面では、使用するフォントの言語を選択します。「Japanese」をクリック。

次の画面。フォントウェイト(フォントの太さ)によってファイルが分かれています。以下はそれぞれのフォントウェイトの見本です。

使用したい太さを選択します。お試しであれば「Regular」が無難。必要であれば後でこのページに戻ってきて複数ダウンロードしましょう。

太さを選択すると次の画面に移ります。ここでは画面の右下辺りを確認。

「Download」ボタンをクリックすると、ダウンロードが始まります。

ダウンロードしたファイルがこちら。約16.5MBのOpenTypeフォントです。このファイルから実際にフォントをインストールしていきます。

フォントをインストールする方法

Macの場合、apple公式サイトにインストール方法が掲載されていますので、こちらをご覧ください。

Install and validate fonts in Font Book on Mac
In Font Book on your Mac, install, download, or validate fonts to use in apps, and resolve font issues.

Windows10の場合、このファイルを右クリック→「すべてのユーザーに対してインストール」でインストールできます。

プログラミングで使用する場合

プログラミングで使用する場合、選択肢は2つあります。「Source Han Code」と「Source Han Mono」です。

CodeとMonoの違い

この2つはどちらも「Source Code Pro」というプログラミング用に開発されたフォントを欧文フォントに使用し、日本語の文字には基本的に源ノ角ゴシックが使用されています。

2つの違いは、簡単に言えば「日本語で使用する文字のみに絞ったフォント」がSource Han Code、「韓国や中国の文字も含む、東アジア汎用フォント」(Pan-CJKといいます)がSource Han Monoです。

どちらを選ぶか迷ったら、この2点を確認してください。

  • 「令和」の合字を使うか
  • 中国、韓国の漢字を使うか

両方NOなら、ファイルサイズが小さく抑えられるSource Han Code JPで十分です。

Source Han Code JPのインストールと使い方。VSCodeやIntelliJで使うには? (Windows)
追記: Source Han Monoについて 2019年5月27日、新しく「S...

Codeについては上で解説しているので、今回はSource Han Monoをダウンロードしていきます。

Source Han Monoをダウンロード、インストール

まずはAdobe FontsのGithubリポジトリからスタート。

Adobe Fonts
Adobe Fonts has 38 repositories available. Follow their code on GitHub.

Source Han Monoは右下にあるので、クリックして移動しましょう。

OTCかSuper OTCか

移動した先には2つの選択があります。1つは「OTC」、もう1つは「Super OTC」です。

  • OTC → フォントウェイト(フォントの太さ)によってファイルが分かれている

  • Super OTC → 全てのフォントウェイトを1ファイルに格納している

ファイルサイズが気になる方や、使いたいフォントウェイトが決まっている場合はOTC、それ以外ならSuperOTCをダウンロードしましょう。

OTCを選択する場合

まずはOTCをダウンロードしてみます。先ほどクリックした先はこんな画面になるはず。

「〇〇/OTC」というフォルダが並んでいます。これは全て同じフォントですが、太さによってフォルダ分けされています。

今回はRegularをダウンロードしてみます。「Regular/OTC」をクリックしましょう。

クリックした先には.otfファイルが並んでいます。「SourceHanMono」の後に何も表記が無いものを選んでクリック(ちなみにその下の「It」と表記があるファイルは斜体です)。

クリックした先の画面右下「Download」ボタンをクリックしてダウンロードしましょう。

OpenTypeフォントファイルがダウンロードできます。ちなみにサイズは約16.4MB。

ダウンロードした後は先ほどと同じ方法でインストールしてください。

SuperOTCを選択する場合

次にSuperOTCをダウンロードしてみます。先ほどのOTCフォルダが並んでいた画面で下にスクロールしていくと、README.mdが現れます。

ここの「Latest Release」をクリック。

「Source Han Mono.ttc」をクリックしてダウンロードします。上の方に3.25GBと書いてますが、今回の方法ではせいぜい100MBを超える程度です。

ダウンロードしてきたファルは拡張子.ttcのファイル。

.ttcは複数のフォントを含むファイルの拡張子ですが、インストール方法は他と同じです。VSCodeにこのフォントを設定する方法は以下にまとめてありますので、インストール後の設定方法がよく分からないという方はどうぞ。

[VSCode]フォント/文字に関する設定を総まとめ
今回はVSCodeのフォントや文字に関する設定のまとめです。設定を変更する方法と...
タイトルとURLをコピーしました