こんにちは！ちばはるです！
わたしのサイトでは、使いたくて使いたくてしょうがなくて、Google FontsからダウンロードしたYomogiというフォントを使用しています。
Google Fontsを使っていると、ページの読み込みスピードに少し影響が出ることがわかりました。
でも使うことは諦めたくない。
そのため、読み込みスピードを軽くするために、新たにサブセット化をしてみました。
簡単なので、ぜひ試してみてくださいね！
Yomogiフォントが重いわけでなく、外部からフォントを読み込むという行為がサイトを重たくします。
Webフォントの読み取り高速化！3つの方法
Webフォントの読み取りを高速にするためには、3つの方法があります。それはこの3つ。
サブセット化から説明していきますね！
そもそもサブセット化って？
フォントには、漢字や記号、アルファベット・数字など様々な情報が載っています。
サブセット化と言うのは、様々な文字の中から必要な文字だけを残すこと、だと思ってもらえればいいです。
そのため、
・ 使う文字が決まっている人⇨サブセット化
・ たくさん文字を使いたい人⇨Google Fontsの読み込み方法を変える、woff2にする
がいいと思います。
はるのとなりはどこによもぎフォントを使っているの？
わたしは、トップページの見出しとフッター・サイドバーにだけよもぎフォントを使っているよ！
じゃあサブセットの方がいいんだね！
そうだね！いまは、アルファベットと実際に使っている漢字・ひらがな・カタカナしか入れてないよ。
サブセット化のメリット・デメリット
サブセット化のメリットはフォントの読み込みスピードが上がると言うことにつきます。
デメリットは、登録した文字以外使えないことです。
登録した文字以外は使えない…ってことは表示されないってこと？？
違うフォントで表示されるし、遅延読み込みようにswap設定しておけば問題ないよ！あとでコードを出して説明するね！
サブセット化する方法
サブセット化するためには、すでにあるソフトを利用するのが早いです。
以下のソフトを2つともダウンロードします。
サブセットフォントメーカー
WOFFコンバータ
サブセットフォントメーカーはわかるけど、WOFFコンバータって？さっきから出てくるwoffと関係ある？
関係あるよ！フォントの形式にはいくつか種類があるんだけど、その変換をするためのソフトだよ。変換するメリットを紹介するね！
ダウンロードするフォントはTrueTypeフォント(.ttf)やOpenTypeフォント（拡張子.otf）などが多く、ttf形式は一般的なフォント形式です。
それらをさらに軽くしたものが、Web Open Font Formatと呼ばれ、拡張子は.woffか.woff2になります。
.woff2フォントは.ttfに比べて読み取りが高速化されているので、.ttfをそのまま読み取るより高速化が狙えます。
フォントファイルのサイズ自体が軽くなるのでオススメです！
実際にYomogi-Regular.ttfをwoff2に変換した結果がこちら
めちゃくちゃ軽くなっています！
woff化するだけでも読み込みは早くなると思います。
さらに早くするために、サブセットする方法を紹介します。
サブセットメーカーの使い方
まずはサブセットメーカーを使って、使う文字に限りをつけましょう。
サブセットの流れは
① フォントの選択
② サブセット化したフォントファイルの置き場所を選択
③ フォントに格納したい文字を入力
④ サブセット化開始
となります。この時フォントに格納する文字をどのくらいにするか、を各々決める必要があります。
サブセット化するフォントを選び出力先を指定する
画像の①と②をまず設定します。
サブセットフォントメーカーの一番上の参照のボタンをおし、サブセット化するフォントを選びます。
次に、作成したフォントファイルをどこにおくか選びます。
フォントに格納する文字を選ぶ
日本語対応しているWebフォントには、
などが入っています。
漢字をふたつとも合わせると6000文字を超えるんです！
また、全角英数字なんてのもありますが、もってのほかです。
半角さえあればどうにかなります！全角なんて仕事の資料でもイヤイヤ使うくらいなので…。
ということで、わたしの場合は、
・ 半角英数字
・ 使っているひらがな・漢字・カタカナ
のみをフォントに格納する文字として入力しました。
最終的にフォントの形式も変更する場合は、「作成後、WOFFコンバータを起動する」にチェックを入れて作成開始をおします。
WOFFコンバータを使ってファイルを軽くしよう
先にも述べたように、woff形式にするとファイルが軽くなります。
サブセット化せずともそれだけでもOK。
ここではサブセットフォントメーカーを作っている武蔵システムさんのWOFFコンバータを使います。
オンラインで変換してくれるものもあるみたいなので、余計なアプリを増やしたくない人はそっちがおすすめです！
検索してみてね！
WOFFコンバータの使い方
WOFFコンバータの使い方は簡単で、
フォントファイルを選択して、変換開始を押すだけ。
めちゃくちゃ簡単です。これですごい軽いフォントファイルが出来上がりました。
変換したファイルをWordpressで読み込もう
変換したファイルを、FFTPソフトで好きな場所にアップロードします。
サーバー設定のFTPアップロードツールを使ってもOK。
スターサーバーであれば、
- サーバー管理ツール
- FTPアカウント設定
- アップロードしたいドメインを選択
- WebFTPにログイン
- 好きなフォルダに移動
- アップロードからフォントファイルをアップロード
⇧から選択して⇩ログインして
ログイン後好きなフォルダまで移動してアップロードする。
でアップロードできます。
フォントを置く場所はどこにする
わたしは管理しやすいので、
wp-content/themes/cocoon-child-master/fontの中に入れています。まぁでもどこでもいいと思います。わかりやすい場所におきましょう。
置いただけじゃ使えない！CSSを書こう
フォントをアップロードしただけじゃ使えません。CSSに読み込んだりするスクリプトを書きましょう。
テーマファイルエディタのCSSに
を記載します。
urlの指定は、httpsからでなくてもできるようですが、間違いが少ないのでこうしています。
woff2を使う場合を書いているので、formatはwoff2。
違う拡張子を使う場合は、それに合わせて変えます。
また、フォントを読み込みたい場所では
とすることで、フォントを表示することができます。
わたしは、フッターの見出しをYomogiにしているので、
としています。
終わりに
今回は、好きなフォントを使ってWebサイトを軽くするために、サブセット化を試みました。
サイトが重くなるからといってWebフォントを使うのを諦めないで欲しいです！
自分のサイトは好きなように！でもユーザーに優しくなるように、心がけていけるといいなと思います。
コメント