記事内にプロモーションを含む場合があります。

当サイトの記事内では「アフィリエイト広告」などの広告を掲載している場合があります。消費者庁「ステマ規制」にあわせ、読者の誤認とならないよう、コンテンツ制作を心がけていますので、ご安心ください。

また、問題のある表現がありましたら、お問い合わせやコメントにて該当の箇所と併せてご一報いただけますと幸いです。

ページスピードアップ!Webフォントをサブセット化しよう【作業時間10分】

好きなWebフォントを使いながら、ページスピードを改善する|Cocoon ブログについて

こんにちは!ちばはるです!

わたしのサイトでは、使いたくて使いたくてしょうがなくて、Google FontsからダウンロードしたYomogiというフォントを使用しています。

よもぎフォント
フリーの手書き風フォント「よもぎフォント」の配布ページです。

Google Fontsを使っていると、ページの読み込みスピードに少し影響が出ることがわかりました。

はる
はる

でも使うことは諦めたくない。

そのため、読み込みスピードを軽くするために、新たにサブセット化をしてみました。
簡単なので、ぜひ試してみてくださいね!

このページがおすすめな人
  • Google Fontsの読み込みに困っている人
  • 好きなフォントを使いたい人

Yomogiフォントが重いわけでなく、外部からフォントを読み込むという行為がサイトを重たくします。

スポンサーリンク

Webフォントの読み取り高速化!3つの方法

Webフォントの読み取りを高速にするためには、3つの方法があります。それはこの3つ。

読み取りを高速化する方法
  • woff化
  • サブセット化
  • サブセット化してwoff化
Webフォントを軽くするためにできること

サブセット化から説明していきますね!

そもそもサブセット化って?

フォントには、漢字や記号、アルファベット・数字など様々な情報が載っています。

サブセット化と言うのは、様々な文字の中から必要な文字だけを残すこと、だと思ってもらえればいいです。

フォントのサブセット化とは

そのため、

・ 使う文字が決まっている人⇨サブセット化
・ たくさん文字を使いたい人⇨Google Fontsの読み込み方法を変える、woff2にする

がいいと思います。

さくら
さくら

はるのとなりはどこによもぎフォントを使っているの?

はる
はる

わたしは、トップページの見出しとフッター・サイドバーにだけよもぎフォントを使っているよ!

さくら
さくら

じゃあサブセットの方がいいんだね!

はる
はる

そうだね!いまは、アルファベットと実際に使っている漢字・ひらがな・カタカナしか入れてないよ。

サブセット化のメリット・デメリット

サブセット化のメリットはフォントの読み込みスピードが上がると言うことにつきます。

デメリットは、登録した文字以外使えないことです。

フォントをサブセット化するメリットデメリット
さくら
さくら

登録した文字以外は使えない…ってことは表示されないってこと??

はる
はる

違うフォントで表示されるし、遅延読み込みようにswap設定しておけば問題ないよ!あとでコードを出して説明するね!

サブセット化する方法

サブセット化するためには、すでにあるソフトを利用するのが早いです。
以下のソフトを2つともダウンロードします。

サブセットフォントメーカー

サブセットフォントメーカー

WOFFコンバータ

WOFFコンバータ
さくら
さくら

サブセットフォントメーカーはわかるけど、WOFFコンバータって?さっきから出てくるwoffと関係ある?

はる
はる

関係あるよ!フォントの形式にはいくつか種類があるんだけど、その変換をするためのソフトだよ。変換するメリットを紹介するね!

ダウンロードするフォントはTrueTypeフォント(.ttf)やOpenTypeフォント(拡張子.otf)などが多く、ttf形式は一般的なフォント形式です。
それらをさらに軽くしたものが、Web Open Font Formatと呼ばれ、拡張子は.woffか.woff2になります。

フォント形式について

.woff2フォントは.ttfに比べて読み取りが高速化されているので、.ttfをそのまま読み取るより高速化が狙えます。
フォントファイルのサイズ自体が軽くなるのでオススメです!

実際にYomogi-Regular.ttfをwoff2に変換した結果がこちら

フォントをwoff2に変えた時のファイルサイズの違い

めちゃくちゃ軽くなっています!
woff化するだけでも読み込みは早くなると思います。
さらに早くするために、サブセットする方法を紹介します。

サブセットメーカーの使い方

まずはサブセットメーカーを使って、使う文字に限りをつけましょう。
サブセットの流れは

① フォントの選択
② サブセット化したフォントファイルの置き場所を選択
③ フォントに格納したい文字を入力
④ サブセット化開始

サブセットメーカーの使い方

となります。この時フォントに格納する文字をどのくらいにするか、を各々決める必要があります。

サブセット化するフォントを選び出力先を指定する

画像の①と②をまず設定します。

サブセットメーカーの使い方

サブセットフォントメーカーの一番上の参照のボタンをおし、サブセット化するフォントを選びます。
次に、作成したフォントファイルをどこにおくか選びます。

フォントに格納する文字を選ぶ

日本語対応しているWebフォントには、

日本語対応しているWebフォント
  • JIS第1水準漢字
  • JIS第2水準漢字
  • ひらがな
  • カタカナ
  • 全角英数字
  • 半角英数字
  • 記号

などが入っています。

漢字をふたつとも合わせると6000文字を超えるんです!

また、全角英数字なんてのもありますが、もってのほかです。
半角さえあればどうにかなります!全角なんて仕事の資料でもイヤイヤ使うくらいなので…。

ということで、わたしの場合は、

・ 半角英数字
・ 使っているひらがな・漢字・カタカナ

のみをフォントに格納する文字として入力しました。

最終的にフォントの形式も変更する場合は、「作成後、WOFFコンバータを起動する」にチェックを入れて作成開始をおします。

WOFFコンバータを使ってファイルを軽くしよう

先にも述べたように、woff形式にするとファイルが軽くなります。

サブセット化せずともそれだけでもOK。

ここではサブセットフォントメーカーを作っている武蔵システムさんのWOFFコンバータを使います。
オンラインで変換してくれるものもあるみたいなので、余計なアプリを増やしたくない人はそっちがおすすめです!

はる
はる

検索してみてね!

WOFFコンバータの使い方

WOFFコンバータの使い方

WOFFコンバータの使い方は簡単で、

フォントファイルを選択して、変換開始を押すだけ。

めちゃくちゃ簡単です。これですごい軽いフォントファイルが出来上がりました。

変換したファイルをWordpressで読み込もう

変換したファイルを、FFTPソフトで好きな場所にアップロードします。
サーバー設定のFTPアップロードツールを使ってもOK。

スターサーバーであれば、

  1. サーバー管理ツール
  2. FTPアカウント設定
  3. アップロードしたいドメインを選択
  4. WebFTPにログイン
  5. 好きなフォルダに移動
  6. アップロードからフォントファイルをアップロード
FTPアプロードツールへの入り方

⇧から選択して⇩ログインして

FTPアップロードツールにログインする方法

ログイン後好きなフォルダまで移動してアップロードする。

FTPアップロードツールのアップロードボタン

でアップロードできます。

フォントを置く場所はどこにする

わたしは管理しやすいので、

wp-content/themes/cocoon-child-master/font

の中に入れています。まぁでもどこでもいいと思います。わかりやすい場所におきましょう。

置いただけじゃ使えない!CSSを書こう

フォントをアップロードしただけじゃ使えません。CSSに読み込んだりするスクリプトを書きましょう。
テーマファイルエディタのCSSに

を記載します。

urlの指定は、httpsからでなくてもできるようですが、間違いが少ないのでこうしています。

woff2を使う場合を書いているので、formatはwoff2。
違う拡張子を使う場合は、それに合わせて変えます。

また、フォントを読み込みたい場所では

とすることで、フォントを表示することができます。
わたしは、フッターの見出しをYomogiにしているので、

としています。

終わりに

終わりに|あと書き的なこと

今回は、好きなフォントを使ってWebサイトを軽くするために、サブセット化を試みました。

サイトが重くなるからといってWebフォントを使うのを諦めないで欲しいです!

自分のサイトは好きなように!でもユーザーに優しくなるように、心がけていけるといいなと思います。

この記事を書いた人
ちばはるのアイコン

ちばはる

料理|読書|ゲーム|猫が好き
運動不足解消のためにホットヨガに通い始めました。
わたしの日常が、誰かの役に立つと嬉しいです。

プロフィールへ

ブログについて
スポンサーリンク

ブログランキング・にほんブログ村へ にほんブログ村 ブログブログ 雑記ブログへ にほんブログ村 ブログブログへ

はるのとなり

コメント