Webフォントをどうしても使いたい人用サブセット手順
どうも。
アイキャッチ用に漢字の羅列をスクショしたんですが予想以上に容量が重くなってしまったので、変な枠で囲ってます。
今回は予告しておりましたように、Webフォントのサブセット手順についておさらいして行こうと思います。
ただ僕自身も参考にさせて頂いてるので、あんまアレですねｗ
特に記述することないやもしれぬな。
Webフォントサブセット手順
使いたいフォントを決める
まず制限のつかない、フリーのWebフォントを探します。
これはほんと色々あるので、「Webフォント 無料」とかで検索してみてください。
お気に入りのものがあったら、ダウンロードしておきます。
後々の作業をしやすくするため、デスクトップに保存することをおすすめします。画面切り替え無くて楽です。
当ブログの場合はこちらの「フロップデザインフォント」を使用させていただいてます。（すごいゆるい感じで好きｗ）
※追記
上記フォントは有料やったらしい…orz
調子こいて使用しててすいませんでした。「無料で商用利用可能です」という文言があったので大丈夫だと思ってましたがちゃんと説明書き読んでみると、Webフォントとしてサーバーにアップするには許可証がいるっぽいですね。
WP用プラグイン（￥2000）か専用ソフト（￥5980）が必要だそうで。
こういうこともあり得るので、慎重に…。
前回使ってたこども角丸ゴシックは大丈夫ですね。
サブセット化する
普通にダウンロードしたWebフォントファイルをサーバーにアップロードしても良いんですが、ものによってはものすごい量の文字列が入っているので容量もすごいことになります。（〇〇MBとかの世界）
なので使いたい文字列だけをフォントファイルの中から抽出してファイル容量を軽減させることを、サブセット化と呼ぶんだと思うてますが細かいことは知りません。
用途によって、変換させるべき文字列は変わってきますね。
前回記事のように、「一部の文章にのみ反映させたい」という場合はその文字列だけ変換させます。（「どうも。かなり女の子っぽくますね！」という17文字だけ。）
現在僕がやってるように、サイト全体に使いたい場合は、
- ある程度の漢字
- かな・カナ・英数
- ある程度の記号
上記に絞ることで500KB～1MB以内に収めることが出来ます。注意：現在はやってません。
これなら我慢出来るレベル。
インストールするツール
武蔵システムさんにて「WOFFコンバータ」「サブセットフォントメーカー」というツールをダウンロードします。
これらを使えば、フォントファイルから特定の文字列の抽出、あらゆるブラウザに対応する為のファイル形式に変換するといったことが出来ます。
公式ページ画面中央にある「その他のフォントツール」項目からダウンロード出来ますのでお使いのパソコンにインストールしてください。
使用したい文字列を決める
第一水準の漢字をコピペしてうんぬん…とよく書いてありますが実際いらん漢字がめっちゃ多いです。（2600字？）
なので僕は常用漢字の方をコピペしました。こちらの方が少し少なくなります。（2100字ぐらい）
ググれば一覧は出てくるので割愛。
常用漢字でも必要無いな～、と思うものはありますが都度消していくのは心が折れますｗなのでまぁ目についたものだけ（これなんて読むんだよ！？的なもの）消しても良いかもですね。
逆になんでこれが無いの？というのもあります。
画後自間分更合個気機昨今最近一二
この辺はよく使うので自分で入れました。
まぁこれは人それぞれなので、熟考した上で漢字の取捨選択を。
あと、注意点として入れとかないと反映されません。僕自身もカタカナ全てとひらがな「む」以降がコピペ漏れしてたので自分で追加するまで違和感すごかったｗｗ
ツールの使い方
とりあえず変換したファイルを保存しておくために、デスクトップ上に新規フォルダを作成しておきます。（一応右クリックで出来ますからね。分かってると思いますが。）
管理しやすくなりますのでおすすめ。
サブセットフォントメーカー
まずサブセットフォントメーカーを起動。
参照からファイルを選択します。
Webフォントの中には色々入っていますが、ここにはotfという拡張子のファイルを選択してください。（ものによっては、ttfしか無いものもあります。その場合はttfでも良いです。）
Webフォントのフォルダ内でファイルをクリックして詳細を見ると「OpenTypeフォント」または「TrueTextフォント」と書いてありますので、それぞれの略がotf・ttfということですね。
下の「作成するファイル」欄にも一旦上と同じファイル名をコピペします。
その後、ファイル名の「desktop」以降を「￥新規フォルダ名￥ファイル名.ttf」に変更します。
ttfというファイルは古いアンドロイド系に対応するため作っておきます。切り捨てるなら別に作らなくていいですが、僕の場合は自分が古いアンドロイド使ってるので、対応してないと困りますｗｗ
ttfを作らない場合は、拡張子はotfのままで大丈夫です。以下「WOFFコンバータ」でWOFFに変換するためだけに作り、アップロードはしなくていいです。
ttfに変換しようとした場合「不適当です。otfに変更しますか？」的なことをダイアログが出てきますが「いいえ」を選択すると普通に作れます。
変換したい文字列を貼り付ける場所は画像参照。
「WOFFコンバータを起動する」にチェックを入れておいてください。
WOFFコンバータ
こちらは特にすることありません。
上のWOFF2ファイルは必須です。（モダンブラウザ用に圧縮されたものが使える）
物によってはEOTファルが作成できないと言われますので、チェック外しといても良いです。というかそもそもIE8以下を切り捨ててるなら要らないと思います。（今回はサポートしないやり方をご紹介）
サンプルは別に見ても見なくてもどちらでも。見たい場合はフォルダ内にブラウザアイコンの付いたものが作成されてると思うのでそれで確認できます。
とりあえずここまでで、「ttf」「woff」「woff2」の3つのファイルが出来ていればおｋです。
アップロード
お使いのサーバーにいって、子テーマ階層にアップします。
子テーマに「myfonts」というフォルダを作成してそこにアップすれば後の作業が楽です。
CSSに記述
とりあえず、全てに使いたい人用に書きます。（もし特定のもののみ、という場合は以下のCSSを＜style＞で囲って使いたい記事のカスタムフィールドから入れるなり、インラインに埋め込むなりと。）
@font-face {
font-family: "なんでもおｋ";
src: url('./myfonts/example.woff2') format('woff2'),
url('./myfonts/example.woff') format('woff'),
url('./myfonts/example.ttf') format('truetype');
}とりあえずこんな記述でも読み込まれますｗ
「font-family」部分は任意のもので大丈夫です。有名なたぬきマジックフォントなら「tanuki」殴り書きクレヨンなら「crayon」とかでも良いですね。他とかぶらず、かつわかり易ければ。
「example」部分は上のツールで変換したファイル名に置き換えてください。
これで大体のブラウザは行けると思います。一応自分の環境＋IEで表示確認しても大丈夫です。「IEが大丈夫なら行けるやろ？」的な。
これでフォント自体の読み込みは完了です。
サイト上に反映させるためにはフォントファミリーの名称を「sample」と指定している場合、
<p style="font-family: 'sample';">本文</p>これで一部段落のみ反映させることも出来ますし、CSSに
body{
font-family:'sample';
}こう記述して全体に反映させることも出来ます。
/*反映させたいクラス名*/{
font-family:'上で決めた名前';
}要はこういうことですね。
まとめ
少しガバガバな解説になってしまいましたが、こんな感じですね。
気になるページ容量はというと…。
これだけ大きく見た目が変わって、600KB以下なら許容範囲じゃないですかね？
初回のページ読み込みは致命的に遅くなりますが、キャッシュを効かせればページ遷移スピードはほぼ変わりません。
反映されないという場合はキャッシュが効いてたり、カスタマイズ画面での文字種指定が優先されたりしますので、それぞれキャッシュ削除なり、指定しないを選択するなり様子見てください。ブラウザキャッシュもありえますので、履歴削除もしてみたり。
また、フォントに対応していない文字は通常の文字で表示されてしまうので僕が使ってるようなフォントだとあまり目立たない感じになってくれるので、出来るだけ違和感の薄いものを選択してみると良い感じですね。細字の明朝体とかにすると違和感がすごくなりそうなのでもう少し多くの漢字をカバーする必要が出てきそうですが。
これを非同期で読み込ませるようにすればさらに良くなるんですが、それはまた別記事にて。