以前から当サイトをご覧頂いている方はお気づきかもしれませんが、サイト全体の文字フォントを変更してみました。「源ノ角ゴシック（げんのかくごしっく）」という、最近開発された視覚的に読みやすいフォントです。
・AdobeとGoogleが共同開発している信頼性
・オープンソースなので無料で自由に使える
・日本語フォントに対応している ←ここ重要
といった理由から、日本国内でも徐々に利用者が増えているようです。試しに当サイトでの「源ノ角ゴシック」フォントの適用前と適用後の見え方を以下に並べてみましたが、その違いは一目瞭然ですね。
しかし、こうしたフォントをいざ自分の運営しているブログやWebサイトで使いたいとなると、「ファイル変換」「アップロード」「CSS記述」など、いくつかの手順を踏まなければなりません。（自分のパソコン上で利用するだけなら、インストールして簡単に利用できるのですが・・）
そこで本記事では、特にWordPressでブログやWebサイトを運用されている方向けに、自分の運用サイトで「源ノ角ゴシック」を利用するまでの手順を解説してみたいと思います。
1. 事前知識
1-1. 「源ノ角ゴシック」と「Noto Sans」と「Source Han Sans」との違いについて
「源ノ角ゴシック」について調べると、「Noto Sans」とか「Source Han Sans」とか、色んな名称が出てきます。これは、Adobe側が公開している名称かGoogle側が公開している名称か？の違いです。
Adobe側： Source Han Sans（日本語名称が「源ノ角ゴシック」）
Google側： Noto Sans
実際にCSSでフォント名や文字の重さ（太さ）を設定する時の名称がやや異なりますが、中身はどちらも同じです。
1-2. Webでフォントを扱う際の注意点について
Webサイトの文字を特殊なフォントで表示したい場合、フォントのデータをWeb上にアップロードする必要があります。
Webページをどんな文字フォントで表示するか？は、CSSと呼ばれるファイルに記述します。「このページはこのフォントで表示してね」といった感じで。例えば、こんな風に・・
font-family: "游ゴシック", "Hiragino Kaku Gothic ProN", "ＭＳ ゴシック", sans-serif;
なので、今回も以下のようにフォント名（「Noto Sans JP Thin」とします）を設定すれば動きそうですが・・
font-family: "Noto Sans JP Thin";
これだと、各閲覧者のパソコンに「Noto Sans JP Thin」という名前のフォントがインストールしていなければ、指定したフォントでは表示されません。なので別途フォントデータをWebサイトを設置しているサーバー上などに設置する必要があります。
この辺はフォントの仕組みに関する説明になるので割愛しますが、Webページで特殊なフォントを扱いたい時はフォントデータをサーバーに設置する必要があることは、覚えておいてください。
2. 【手順１】 フォントデータをWeb上で扱えるようにする（軽量化、ファイル変換）
さて、それでは早速手順を解説していきたいと思います。フォントデータはそのままだとWeb上で扱えないので、扱えるように変換作業を行なう必要があります。また、Web上での表示速度を上げるために「フォントの軽量化（サブセット化）」というものを行なう必要もあります。
2-1. フォントデータをダウンロードする
まずは、フォントデータをダウンロードしましょう。今回はGoogle側が公開している「Noto Sans」を利用したいと思います。以下のリンクからダウンロードできます。
ページ右上の「DOWNLOAD ALL FONT」ボタンからではなく、下の一覧にある「Noto Sans CJK JP」からダウンロードしてください。前者だと全言語のフォントが入ったファイルになってしまうので。
2-2. ダウンロードしたフォントファイルを軽量化する
フォント本体ファイルのダウンロードが完了したら、さらに ”軽量化（サブセット化）” という作業をする必要があります。
この ”軽量化（サブセット化）” という作業は、その名の通りファイルのサイズを小さく（軽く）する作業です。Webページ上でフォントが表示される速度を上げるために必要です。必須ではないのですが、これを行なわない場合フォントデータの読み込みに時間が掛かり、Webページを開いてから文字が表示されるまでに数秒掛かってしまいます・・。
この問題は、「日本語フォント」だからこそ発生するものでもあります。
フォントファイルというものには、１つ１つの文字に対してどんな見た目なのか？が全て収録されています。つまり日本語の場合、「ひらがな」「カタカナ」「漢字」「記号」など、日本語で使うあらゆる文字が１つ１つ収録されています。（漢字だけでも、数千文字！）
なので、「英語だけのフォント」などに比べると、どうしてもファイルのサイズが大きくなってしまい、結果としてWebページ上で表示する際に読み込みが遅くなって表示に時間が掛かってしまうんですね。
ただ、漢字といっても中には「絶対これ普段使わないやろ」という漢字もたくさんございます。漢字検定１級レベルでしか出てこないような漢字とか・・。そういった漢字を思い切って削除してしまう事で、フォントファイルのサイズを小さくするのが ”軽量化（サブセット化）” と呼ばれる手法になります。
”軽量化（サブセット化）” に関する具体的な手順については、以下のサイトに詳しい手順が書かれているので、参考に進めてみてください。
Noto Sans (源の角ゴシック) をWebフォントで使えるように軽量化する方法
2-3. 軽量化したフォントファイルを、Web上で使えるように変換する
フォントファイルは、そのままの形式だとWeb上で使えません。上の ”軽量化（サブセット化）” もあくまで、同形式のままでファイルサイズを小さくするものなので、Web上で使うには別途「フォントファイルの変換」が必要になります。
具体的には、「.woff」「.eot」「.ttf」という３種類のフォーマットに変換したフォントファイルを作成する必要があります。たくさんあって難しそうですが、「サブセットフォントメーカー」という専用の変換ツール（Win/Mac両対応）が無料で配布されていますので、有り難く使わせてもらいましょう。
具体的な手順は、以下ページに詳しく書かれているので、１〜４をご参考に。
Noto Sans CJK JP フォントをダウンロードしてサイトに適用する手順
・・以上の手順で、フォントデータがWeb上で扱える状態となりました。
3. 【手順２】 WordPressテーマへの適用
続いて、「源ノ角ゴシック（Noto Sans）」をWordPressテーマで使えるように、設定などを行なっていきます。やる事としては、「フォントデータをサーバー上に設置する」「WordPressテーマのCSSを記述する」の２点になります。
3-1. 軽量化したWebフォントファイルを、WordPressテーマファイル内にアップロード
レンタルサーバー上のWordPressテーマフォルダ内に「font」フォルダを作り、その中に変換後フォントファイルをアップロードするだけでOKです。
サーバーへのアップロードは、WordPressの管理画面から出来ないので、FTPツールの使用をオススメします。
（参考）
3-2. WordPressテーマのCSSファイルに、Webフォントに関する記述を追記
最後に、WordPressテーマのCSSファイル（style.css）内に、使用したいWebフォントの定義を記述しましょう。
3-2-a. フォントファイルに関する記述を追記
こちらの記述をCSS内に記述すると、font-familyのフォント名に「Noto Sans JP Thin」「Noto Sans JP Light」などと指定することで、源ノ角ゴシック（Noto Sans）のフォントで表示されるようになります。
@font-face {
font-family: "Noto Sans JP Thin";
font-style: normal;
font-weight: 100;
src: url("../font/NotoSansCJKjp-Thin.eot");
src: url("../font/NotoSansCJKjp-Thin.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-Thin.woff") format("woff"),
url("../font/NotoSansCJKjp-Thin.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans JP Light";
font-style: normal;
font-weight: 200;
src: url("../font/NotoSansCJKjp-Light.eot");
src: url("../font/NotoSansCJKjp-Light.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-Light.woff") format("woff"),
url("../font/NotoSansCJKjp-Light.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans JP DemiLight";
font-style: normal;
font-weight: 300;
src: url("../font/NotoSansCJKjp-DemiLight.eot");
src: url("../font/NotoSansCJKjp-DemiLight.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-DemiLight.woff") format("woff"),
url("../font/NotoSansCJKjp-DemiLight.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans JP Regular";
font-style: normal;
font-weight: 400;
src: url("../font/NotoSansCJKjp-Regular.eot");
src: url("../font/NotoSansCJKjp-Regular.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-Regular.woff") format("woff"),
url("../font/NotoSansCJKjp-Regular.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans JP Medium";
font-style: normal;
font-weight: 500;
src: url("../font/NotoSansCJKjp-Medium.eot");
src: url("../font/NotoSansCJKjp-Medium.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-Medium.woff") format("woff"),
url("../font/NotoSansCJKjp-Medium.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans JP Bold";
font-style: normal;
font-weight: 700;
src: url("../font/NotoSansCJKjp-Bold.eot");
src: url("../font/NotoSansCJKjp-Bold.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-Bold.woff") format("woff"),
url("../font/NotoSansCJKjp-Bold.ttf") format("truetype");
}
@font-face {
font-family: "Noto Sans JP Black";
font-style: normal;
font-weight: 900;
src: url("../font/NotoSansCJKjp-Black.eot");
src: url("../font/NotoSansCJKjp-Black.eot?#iefix") format("embedded-opentype"),
url("../font/NotoSansCJKjp-Black.woff") format("woff"),
url("../font/NotoSansCJKjp-Black.ttf") format("truetype");
}
3-2-b. Webフォントの使用箇所に font-family を記述
上の記述はあくまで定義しただけなので、実際にWebページ内のどの部分の文字を「源ノ角ゴシック（Noto Sans）」フォントで表示させるかは、別途指定しましょう。
これは、通常のフォント指定と同じ手順。例えばWebサイト全体で「Noto Sans JP Light」を使いたい場合は、以下のように記述します。
html,
body {
font-family: "Noto Sans JP Light";
}
見出し（h2）のみで使う場合は、例えばこんな風に記述。
h2 {
font-family: "Noto Sans JP Light";
}
これで、WordPressサイト上の自由な場所で「源ノ角ゴシック（Noto Sans）」を使えるようになりました。
4. おわりに
英語フォントだと（文字数が少ないため）ファイルも小さいので、Google Fonts のように、Webページのhead内に外部CSS定義を１行記述するだけで、自前でフォント変換やアップロードをせずともすぐにWebフォントが使える仕組みもあったりします。（本Webサイトのタイトルにある While { Creation } の部分も、実はWebフォントです）
Web技術の向上に伴い、日本語のWebフォントも扱いやすい環境が整ってきたように思いますが、今後も、日本語Webフォントの種類や、簡単に使える仕組みが、どんどん増えていってほしいですねー。