Adobe社の無料フォントSource Han Code JPをインストールする方法 Windows編

今日はAdobe社が開発したhtmlやcss・JavaScriptなどのコーディング用の無料フォント Source Han Code JP（源ノ角ゴシック Code JP）を、WindowsPCにインストールする方法について説明しますね。

『フォントのインストールなんてしたことないけど大丈夫かなぁ』という初心者さんでも、ちゃんとフォントのインストールできますのでご安心を。ゆっくりやって下さいネ。

それでは、Adobe社が開発したコーディング用の無料フォントSource Han Code JPを初心者がインストールする方法(Windows編)をはじめます……っと、その前に「Source Han Code JPって？」という人もいると思うのでその説明から行きますね。

Source Han Code JPって？

Source Han Code JPフォントは、Adobe社の日本語フォント開発チームに所属する服部正貴氏がつくった「コーディング用の見やすい&かっこいい&素敵な無料フォント」です。日本語名では源ノ角ゴシック Code JPになります。

つまり「Source Han Code JP = 源ノ角ゴシック Code JP」ということですね。ちなみに「源ノ角」の読み方は、「げんのかく」です。

Adobe社は、Illustrator(イラストレーター)・PhotoShop(フォトショップ)といったデザインのプロ達が使用するソフトウェアを作っている会社です。その会社がhtmlやcss・JavaScriptをはじめとするプログラミングのコーディング用フォントとして作ったので、当然オシャレ&クールです。しかも無料です。

それでは次にインストールをしていきましょう。

Source Han Code JPのインストール手順

それでは、Source Han Code JPフォントをインストールしていきましょう。

まずは公式サイトAdobe Fonts GitHubサイトにアクセスしましょう

Releases · adobe-fonts/source-han-code-jp

Source Han Code JP | 源ノ角ゴシック Code. Contribute to adobe-fonts/source-han-code-jp development by creating an account on GitHub.

github.com

アクセスすると、

これまでリリースされたSource Han Code JPフォントの各バージョンが、新しい順でならんでいます。

必要に応じてスクロールさせ、(OTF, OTC)と名前がついたリンクを探し、クリックします。上記の例で言うと Fonts version 2.012R (OTF, OTC)になります。なお2.012はバージョンです。バージョンアップすれば変わります。

というわけで(OTF, OTC)と名前がついたリンクをクリックして、

画面にある「Source code (zip)」をクリックして下さい。ダウンロードがはじまります。

[フォルダを開く]を選択し、ダウンロード先のフォルダを開きます。

ダウンロードしたzipファイルをクリックすると、エクスプローラに圧縮フォルダーツールが表示されるので、

圧縮フォルダーツールをクリックし、[すべて展開]をクリックします。

［完了時に展開されたファイルを表示する］にチェックが入っているのを確認し、［展開］ボタンをクリックします。

source-han-code-jp-2.012R（2.012はバージョンアップすると数字が変わります。）というフォルダができます。

そしてsource-han-code-jp-2.012Rフォルダをクリックすると、

OTFフォルダが表示され、

さらに、OTFフォルダとクリックすると、

「SourceHanCodeJP」という名前がついたファイルが14あります。これを一つ一つダブルクリックして、［インストール］ボタンを押せばOKなのですが、ちょっと大変ですよね。

ということで、楽をしましょう。まずスタートボタンから、[設定]をクリックし、

[設定の検索]に、フォントと入力すると、[フォント設定]が表示されるのでクリックすると、

[フォントの追加]が表示されるので、

拡張子がotfというファイルすべてを選択し、フォントの追加へドラッグアンドドロップをします。

しばらくまってインジケーターが消えたのを確認してください。下の方にスクロールさせると、源ノ角ゴシック Code JPが、インストールされているのが確認できます。

インストールはこれで終了です。

まとめ

今日はAdobe社が開発したhtmlやcss・JavaScriptなどのコーディング用の無料フォントSource Han Code JP（＝源ノ角ゴシック Code JP）を、インストールする方法について説明しました。

『フォントのインストールなんて大丈夫かなぁ』という初心者さんでも、ちゃんとフォントをインストールできますのでご安心を。各テキストエディタで設定する方法は別記事でご紹介していますので、以下からどうぞ。

VSCodeでフォントを変更する方法

Visual Studio Codeでコーディングフォントを変更する方法を、フォントのインストール方法もふくめて説明しますネ。

creating-homepage.com

2021.10.29

Bracketsのフォントを簡単に変更・設定する方法

Bracektsエディタのフォントを変更・設定する方法は？　『インストール直後にBracketsエディタで初期設定されているフォントを変更したいなぁ』と思いませんか？htmlやcss・JavaScriptをコーディングする時に、見た目が素敵...

creating-homepage.com

2016.05.25

Atomテキストエディタのフォントを簡単に変更する方法

Atomテキストエディタのフォントは、コア設定画面の「フォント」欄にフォント名を入力して、Atomを再起動することで簡単に変更できます。 Atomで初期設定されているフォントもそこそこカッコいいですよね。しかし...

creating-homepage.com

2016.04.03

またAdobe社が開発し、2017年4月3日にリリースされた無料フォントSource Han Serif(=源ノ明朝)のインストール方法はこちらです。

Adobe社が開発したSource Han Serif(=源ノ明朝)を初心者がインストールする方法(Windows編)

今日は、Adobe社（とGoogle Inc.と(株)イワタと）が開発し、2017年4月3日にリリースされた無料フォントSource Han Serif(=源ノ明朝)を初心者がインストールする方法(Windows編)をご紹介します。 ...

creating-homepage.com

2017.04.06