Violet@Tokyo

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

約7分



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

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

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

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

head内に以下を記述。

<link href=”https://fonts.googleapis.com/earlyaccess/notosansjapanese.css” rel=”stylesheet” />

2.importで読み込む場合

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

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

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

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

{ font-family: ‘Noto Sans Japanese’, sans-serif; }

上記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に以下のコードを記述するだけ。

@font-face {
font-family: ‘Noto Sans Japanese’;
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’) format(‘truetype’);
}
@font-face {
font-family: ‘Noto Sans Japanese’;
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’);
}

フォントについて

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

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

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

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

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

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

 

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

最新情報をお届けします

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

Pick Up


About The Author

violet
はじめまして。このブログを執筆しているViolet(ヴィオレ)です。
このブログは私が日々感じたこと、考えたことに独自の視点を交えて書き留めている忘備録です。読者の方に少しでも楽しんでいただけたら幸いです。
Follow :