このサイトのテーマは’Neve’（ニーヴ）。和製テーマではないので、デフォルト以外のフォントを選択したければFont-Familyの指定が必要。
今回は’NotoSansJP’（font-weight:300,font-weight:400,font-weight:900）を使用予定。「外観」→「カスタマイズ」→「タイポグラフィ」から指定できるが、CDNから引っ張ってきてしまう故、他の方法で対処。
Download
Google Fonts （新しいタブで開きます）にてNoto sans JPを検索しStylesページに移動。画面右側の’select…＋’ボタンで、Light,Regular,Black（オプションでMediumも）を選択肢、ページの右端上部”Download family”ボタンから、”Noto_Sans_JP.zip”をダウンロード。
解凍すると現れるのは、以下のファイル群。
Noto_Sans_jp.zip
subset & convert
ウェブフォントとしてサーバにアップロードするため、拡張子”.otf”のファイルを.woff,.woff2に変換するが、その際、所謂 “サブセット化” つまりウェブサイト上で使用する文字群のみを抽出し、データを軽くする作業が欠かせない。武蔵システム様のご提供くださっている以下のアプリを使用。
サブセット化：”サブセットフォントメーカー“
woff化：”WOFFコンバータ“
Subset Font Maker & WOFF Converter
作成元フォントファイル(S):
ウェブフォント化予定のフォント(.otf)を一つずつ指定していく。今回は3種類のフォント(.otf)をひとつずつ順番に計3回指定
Black:font-weight:900
Regular:font-weight:400
light:font-weight:300
作成後フォントファイル(D):
サブセット化がすべて完了したフォント（.woff、.woff2）が格納されるフォルダ名と、ファイル名を指定しておく。ファイル名はNotoSansJP-Black.otf 等でも問題なし
ex) C\Users\〇〇\Desktop\fonts\NotoSansJP-Black.otf
フォントに格納する文字(C):
このサイトで使用するであろう常用漢字、ひらがな、カタカナ、全角半角英数字、記号をひとまとめにして指定
赤枠
作成開始ボタンを押すと、サブセット完了後に引き続きWOFFコンバータが起動し、その後は、WOFFとWOFF2を作成後、左図2枠目窓に記載の作成後フォントファイルに格納。
ex) C\Users\〇〇\Desktop\fonts\NotoSansJP-Black.otf と指定されていた場合は、fontsフォルダ内にNotoSansJP-Black.otfと共にNotoSansJP-Black.woffとNotoSansJP-Black.woff2が保存される仕組み。
変換後フォルダ
完成後のフォルダ内の様子
右図のとおり、3種類のフォントがそれぞれ.woffと.woff2のセットで格納されている。加えて.otfファイルも3つ格納されているが、それは手動で削除済み。
作成後のサイズ
サブセット前のフォルダサイズが26MB で、サブセット後のフォルダサイズが２MB。上述の数値は単純に比較はできないものの、いずれにしてもサブセット化すれば、軽量になりWebフォント絡みのPageSpeed Insightsの指摘は一切表示されず。
stylesheet
作成後のfontsフォルダを内包するWebフォント群と共にアップロード。最後の仕上げとして、スタイルシートに@font-face{}にて指定し、操作完了。
お願い：この投稿は備忘録として作成されたものです。ご参考の折は、他のサイト情報と比較考量の上、自己責任にてご活用ください。
