Violet@Tokyo

Noto Sans JapaneseをWebフォントに設定し、ドツボにはまる

約 6 分

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

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

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

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

head内に以下を記述。

2.importで読み込む場合

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

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

Noto Sans Japaneseを使用したい場所に以下を記述。

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

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

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

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

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

Point

  1. Noto Sans CJK JPをダウンロード
  2. 7つあるスタイルの中からウェイトを選ぶ→私はRegular(400)とDemiLight(300)を使用
  3. サブセット化(軽量)する→サブセットフォントメーカー使用
  4. OTFからWOFFとEOTファイルに変換する→WOFFコンバーター使用(※ここでどツボにはまる)
  5. ファイル一式をサーバーにアップロード
  6. 使用テーマ・cssに@font-faceのコードを記述

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

★ 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ファイルを作成する」にチェックを入れると、サクッと必要なファイルが作成できました。もうホント、嬉しかったなぁ…。

実はWOFFコンバーターも別のフォーマットに変えられます。作成したWOFFからTTPに変換はできました。しかし、そのTTPからETOを作成しようとすると、また同じメッセージが出てうまくできませんでした。

スタイルシートへの記述

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

フォントについて

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

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

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

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

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

(2017年8月1日追記)現在はAXISフォントに変更しています。
Digiprove sealCopyright secured by Digiprove © 2017

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でvioletをフォローしよう!

Pick Up


(最終更新:2017/12/11)

About The Author

violet

はじめまして。ブログの管理人Violetです。

このブログは私が日々感じたこと、考えたことに独自の視点を交えて書き留めている忘備録です。読者の方に少しでも楽しんでいただけたら幸いです。詳しいプロフィールはこちら!


Follow :