Adobe社が開発したコーディング用の無料フォントSource Han Code JP（源ノ角ゴシック Code JP）を初心者がインストールする方法 Windows編

［公開日］2016/05/24［更新日］2018/03/14 · by 管理人 · in Brackets, テキストエディタ, フォント

今日はAdobe社が開発したhtmlやcss・JavaScriptなどのコーディング用の無料フォントSource Han Code JPを、WindowsPCに初心者がインストールする方法について説明しますね。なお、Adobe社が開発し、2017年4月3日にリリースした無料フォントSource Han Serif(=源ノ明朝)のインストール方法はこちらです→Source Han Serif(=源ノ明朝)を初心者がインストールする方法(Windows編)

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

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

Source Han Code JPって？

インストール手順

まとめ

Source Han Code JPって？

Source Han Code JPフォントは、Adobe社の日本語フォント開発チームに所属する服部正貴氏がつくった「コーディング用の見やすい&かっこいい&素敵な無料フォント」です。日本語名では源ノ角ゴシック Code JPになります。→Introducing Source Han 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サイトにアクセスしましょう→Introducing Source Han Code JP。

ダウンロードページを下にスクロールさせると、「Download the fonts」という見出しがあります。そこの「Latest release」をクリックして下さい。

Latest releaseと表示されているのを確認し、画面にある「Source code (zip)」をクリックして下さい。

クリックした後、Google ChromeとInternet Explorerで少し違うので別々に説明しますね。

Google Chromeの場合

ダウンロードがはじまります。

ダウンロードが終了したら、ブラウザーの[フォルダを開く]をクリックしてダウンロードフォルダを開いて下さい。

Internet Explorerの場合

メッセージが表示されるので、［保存］をクリックして下さい。

ダウンロードが終了したら、［フォルダーを開く］をクリックして下さい。

あとはGoogle ChormeもInternet Explorerも一緒です。ダウンロードしたsource-han-code-jp-2.000R.zipファイル(2.000はバージョンアップすると数字が変わります。違っていても気にしないで下さい)を右クリックして、[すべて展開]を選択して下さい。

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

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

フォルダを(複数回)クリックして、OTFフォルダまで行って下さい。

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

ということで、楽をしましょう。まずスタートボタンからコントロールパネルを選択し、表示させて下さい。

表示方法を「小さいアイコン」にして下さい。

フォントを選択して、フォントフォルダを表示させて下さい。

このフォントフォルダに、OTFフォルダ内すべての「SourceHanCodeJP」という名前がついたファイルを移動させましょう。

まず先ほどのOTFフォルダを表示させて下さい。そしてWindows8の場合は［ホーム］タブにある［すべて選択］をクリックして下さい。

Windows7の場合はメニューバーの［編集］→［すべて選択］を選択して下さい。

次に「SourceHanCodeJP」という名前がついた全てのファイルが選択された状態のまま、ドラッグアンドドロップ（=マウスの左側のボタンを押したまま）で、フォントフォルダに移動させます（=マウスの左側ボタンを離す）。

「フォントをインストールしています」というメッセージが一瞬表示された後、フォントフォルダに Source Han Code JP IT・Source Han Code JP N It 中細・Source Han Code JP N 中細・源ノ角ゴシックの4つがあればインストール終了です。

まとめ

今日はAdobe社が開発したhtmlやcss・JavaScriptなどのコーディング用の無料フォントSource Han Code JP（＝源ノ角ゴシック Code JP）を、WindowsPCに初心者さんがインストールする方法について説明しました。『フォントのインストールなんて大丈夫かなぁ』という初心者さんでも、ちゃんとフォントをインストールできますのでご安心を。各テキストエディタで設定する方法は別記事でご紹介していますので、以下からどうぞ。 →Bracketsエディタでフォントを設定する方法 →Atomテキストエディタでフォントを設定する方法またAdobe社が開発し、2017年4月3日にリリースされた無料フォントSource Han Serif(=源ノ明朝)のインストール方法はこちらです→Source Han Serif(=源ノ明朝)を初心者がインストールする方法(Windows編)