ブログのフォントをNoto Sans Japaneseに変更しました。これほど良質な日本語フォントが無料だなんて、まるで夢のよう!

Noto Sans Japaneseをブログで使う場合、いちばん簡単な方法は、「Google Fonts + 日本語早期アクセス」のコードをブログのテーマに貼り付ければ、すぐに使えるようになります。

ブログへの設置はたった2ステップ

1.Styleタグで読み込む場合

head内に以下を記述。

2.importで読み込む場合

style.cssファイルに以下を記述。

3.使用テーマ・style.cssにfont-familyを指定する

Noto Sans Japaneseを使用したい場所（bodyや見出しなど）に以下を記述。

上記1.2のどちらかと、フォントファミリーを指定するだけという、たった2ステップで作業が終わる手軽さから、最初のうちはそのようにしていました。

ところが出来心と言うか、魔が差したとでも言うか、とにかくwebフォントとして使えるように実装してみようと思いたち、作業に取り掛かりました。

日本語は初めてだけど、Webフォントの実装は以前にも何回か経験があります。Noto Sans Japaneseに関しては、色んなサイトにやり方が書かれているので、そう難しい作業だとは思っていませんでした。最初は。

ところがどっこい、やってみたらドツボにはまったよというのが今回のお話しです。前置きの尺が長すぎてすみません。これ以降が本題です。

Noto Sans JapaneseをWebフォントにする手順

上記のようなステップで作業を進めていきます。

★ 3のサブセットフォントメーカーを使用する際、抽出する文字列を記載する箇所があります。その文字列のリスト（第一水準漢字＋アスキー文字＋非漢字文字）は、以下のサイトを参考にしました。

EOTファイルが作れない!

どツボにはまったのはサブセット化が終わり、WOFFコンバーターを立ち上げてから。

Webフォントに必要なのは、主にEOT, TTFかOTF, WOFFの3つ。ところが「ポストスクリプト形式のOpenTypeフォントのため、EOTファイルは作成されません。」の注意書きが…。（WOFFはサクッと作成できました）

しかもこの注意書きは、Noto Sans Japaneseをwebフォントとして使用するやり方を解説している、他のサイトにはひとことも書かれていません。

ということは、私だけに起きた現象なのか？というのが今回のドツボの始まりです。みんなができないならともかく、どこにも書かれてないというのはなんとなくスッキリしない。モヤモヤする…。ということで、さらに詳しく探ってみました。

解決策

いちばんの近道

面倒なことはしたくない。難しいことは考えず、出来上がったファイルだけをダウンロードしたいという方は、以下のリンクに必要なファイルが全て揃っています。使用したいウェイトそれぞれに、EOT, TTF, WOFFが用意されているので、ダウンロードをすればそのまま使えます。

それはそれでありがたいのですが、ここまで来たら自力でなんとかしたいという思いから、しつこく調べてみました。

サブセット済みOTFをTTFに変換

サブセットフォントメーカーで作成した, 「NotoSansCJKjp-Regular.otf」ファイルを、別のフォーマット（ここでは.ttf）に変えてみました。使用したのは以下。「NotoSansCJKjp-Regular.otf」を「NotoSansCJKjp-Regular.ttf」に変換後、再びWOFFコンバーターを立ち上げます。

「変換前ファイル」に「NotoSansCJKjp-Regular.ttf」を指定し、「EOTファイルを作成する」にチェックを入れると、サクッと必要なファイルが作成できました。もうホント、嬉しかったなぁ…。

スタイルシートへの記述

あとは使用テーマに「font」フォルダを作成し、上記の手順で作成した各3つのファイル（eot、woff、ttf）をアップロードしてcssに以下のコードを記述するだけ。

フォントについて

ここまでが実装の手順です。

あちこちのをブログを見て、よく感じることがあります。それは、フォントってすごくだいじだってこと。

ブロガーは「書くことに集中しろ」とよく言われています。でも見せ方はもっとだいじです。たまーに、フォントサイズ10くらいのブログに行きつくことがありますが、見た瞬間、「罰ゲームか」と、読む気が失せて、速攻でプラウザを閉じますもの。

読み物なので文字の大きさや行間のサイズはもちろん、読者のことを考えて、そういった細かいところにまで気を使っているブログは、やはり魅力的。それだけこだわりを持っているってことですからね。

思いの詰まった場所だからこそ、フォントにもこだわりたい。ということで、いずれまたステキなフォントがあったらご紹介したいと思います。以上です。