グーグルフォントを直接サーバーに設置してサブセット化でサイト高速表示 | 福岡のホームページ制作はマリオ君にお任せ

本日はとっても便利でサイトをかっこよくしてくれるグーグルフォント（webフォント）を自社サーバーに直接設置してみたいと思います。設置に合わせてサブセット化（使用する文字を厳選）してより高速化する方法も共有させていただきます。

グーグルフォントをネットで読み込んで使用する方法は下記に詳しく書いておりますので興味のある方はご覧ください。

関連こっちもみてね

fontでライバルサイトに差をつける！グーグルフォント使い方

便利だけどサイト表示が遅くなる

一般的にグーグルフォントをホームページで使用する際は、head内にlinkタグを記述してグーグルさんのサーバーから読み込んで使用することが多いと思います。

head内にlinkタグで読み込んで簡単に色々なフォントを使用することができて大変便利です。フォントが変わるだけでサイトのイメージは大きく変わり、他のサイトと大きくデザイン面で差をつけることができます。

しかし、簡単に設置できる反面linkタグで読み込む方法には大きなデメリットもあります。

それは、サイトの表示が遅くなることです。特に日本語フォントを複数（たくさんの種類や文字の太さなど）使用すると、サイトを開くのも遅くなりますし、画面をスクロールした際など読み込みが遅いので、画像などがチカチカすることがあります。

link読み込みの場合はグーグルさんの家までいって

「すいません、フォント使うんでお借りしますね」

って感じで、毎回サイト閲覧者が来るたびにグーグルさんの家に借りに行っているイメージです。

この借りに行くのに時間がかかるため表示速度が遅くなってしまいます。（※イメージです）

特に携帯のグーグルクロームは動きが顕著で、サファリなどで大丈夫な場合でもグーグルクロームはスクロールすると画像などの読み込みが遅れすぐにチカチカします。
※サファリのみ使用している方は一度携帯のグーグルクロームでも確認してみてください。もしかしたらチカチカしてるかも

ページの表示速度はSEOにも影響してくると言われていますので、サイトが重いのは死活問題になります。

マリオ君のサイトも調子にのって複数の日本語サイトをいれておりますの携帯のグーグルクロームで見た際かなりチカチカしていたので、これはまずいということで、高速化を図るため、グーグルフォントをlinkでの読み込みではなく自社のサーバーにフォントを設置して、尚且つサブセット化してサイトを高速化しました。

他の手段としては非同期で読み込む方法やスクリプトで読み込む方法などのやり方もありますが、どれもチカチカが収まらず（PageSpeed Insightsの採点は上がりますが）体感的に速くならなかったので、直接設置で高速化するに至りました。

サーバに設置すると速くなる仕組み

サイト表示が速くなる仕組みとしては、

自社のサーバーにフォントを設置することで、グーグルさんの家に借りに行く時間がなくなりますのでその分速く表示されるというすごく単純な話です。

これだけでも十分早くなりますが、もうひと手間でサブセット化をしてより高速化することができます。

サブセット化とはフォントの文字を厳選することを指します。

日本語フォントの文字は漢字や数字など合わせて約7000文字程度が用意されていますが、その中であまり使わない難しい漢字なども含まれていますので、それらを省略してよく使う文字だけ厳選することができます。

文字を厳選することにより、よりファイルを軽量化して、高速表示に繫がるという感じです。

注意点としては通常のサイトは問題ないと思いますがたくさんの文字を使うサイトの場合はサブセット化は漢字が制限されるためあまりむいておりません。

執筆活動をされている場合などは、サーバーに設置のみがおすすめです。

グーグルフォントサーバー設置方法

それではグーグルフォントを自社のサーバに設置する方法をご説明させていただきます。
流れとしては下記になります。

• ①グーグルフォントをダウンロード
• ②ダウンロードしたフォントをサブセット化
• ③サブセット化したフォントをwebフォントに変換
• ④CSSでウェブフォントを使用できるように設定

上記の流れでご説明させていただきます。サブセット化を行われない方は②は飛ばしてください。

①グーグルフォントをダウンロード

まずはホームぺージで使いたいグーグルフォントをダウンロードします。
今回は例で、Noto Sans Japaneseを使用します。

ますは、グーグル検索でグーグルフォントと検索し

「Google Fonts: Browse Fonts」をクリックしてサイトを開いてください。
※最近リニューアルしてレイアウトが変わっていますね。
グーグルフォントはこちら

クリックするとサイトが開きますのでサイト上部の検索窓口に今回使用するフォントの頭の部分

noto

を入力すると候補一覧が出てきます。

今回使用するNoto Sans Japaneseをクリックしてください。

クリックすると右上にダウンロードボタンが出てきますので、クリックしてダウンロードしてください。

以上で簡単にグーグルフォントをダウンロードできました。

フォルダを開いてみるとすべてのフォントウエイト（文字の太さ）が入っています。

いくらサーバーに直接設置してサブセット化して高速化できるといっても全部いれるとガチガチにおそくなりますので、今回は２個だけ使用します。

NotoSansJP-Bold
NotoSansJP-Black

の二種類のみ使用しますので他は削除してください。

②ダウンロードしたフォントをサブセット化

続いてはダウンロードしたフォントをサブセット化します。

サブセット化（文字を厳選・よりすぐる）するにあたり注意点があります。

勉強の為ほかのサイト様のサブセット化も調べましたが、ほとんどのサイト様で書いてあったのが、ライセンスの確認を必ず行ってくださいとのことでした。

サブセット化も改変に含まれるようなので、改変していいフォントかどうかライセンスを確認しルールにのっとって使用してください。

天下のグーグルフォントは問題ないので安心してご利用いただけます。

それではサブセット化していきます。

サブセット化するにあたり、フリーのソフトをダウンロードします。

武蔵システムさんのサブセットフォントメーカーです。

サイトを開くとページ下部にダウンロードがありますのでご自身の環境にあったファイルをダウンロードしてインストールしてください。

インストールしてソフトを立ち上げると下記のような画面が出ます。

使用方法をご説明します。

①に先ほどダウンロードしたファイルを参照ボタンをクリックして読み込みます。

②はサブセット後のファイルを保存する場所とファイル名を指定します。参照からはうまくいかなかったので、作成元の部分からパスをコピペしてきました。

③は厳選した文字をいれます。
調べたところNoto Sans Japaneseは
JIS第一水準・JIS第2水準・常用漢字・ひらがな・カタカナ・全角英数字・半角英数字・その他記号が入っているそうです。7000文字程度
※知識がないので間違ってたらすいません。

この中でJIS第2水準は人名とかに使うようなあまり使わない難しい漢字が入っているようで、こちらをはずしてファイルを軽くしていきます。

またJIS第一水準と常用漢字も似ているようで、JIS第一水準の方が文字数が多く、かつ常用漢字にあるのにJIS第1水準にはない漢字は30字のようなので

結果
JIS第1水準＋常用漢字（第一水準にない＋30字）＋その他でまとめると（3759字）

を使ってサブセット化していきます。

③に文字を入力していくのですが、何を入れていいかわからないし、約3000文字も入力したら腱鞘炎になってしまいますので、直接入力ではなく、サブセット化様にまとめてくれている神のようなサイト様がありますのでそちらから拝借させていただきます。

JIS第1水準＋常用漢字＋その他でまとめると（3759字）
は下記サイト様からコピーできます

U-618WEB様

それでは使っていきます。
まずダウンロードしたフォントファイルは「webfont元」というフォルダを作って入れておきます。
サブセット化してカスタマイズしたファイルは「webfont」というフォルダに入れますのでデスクトップに空のフォルダを作っておいてください。

①の作成元フォントファイルの参照をクリックして、「webfont元」の中にいれている

NotoSansJP-Black.ttfを選択します。

次に②の作成後フォントファイルはサブセット後のファイルを保存する場所とファイル名を指定するのですが、こちら先ほども書きましたが参照がうまく動かなかったので（私だけ？？）
作成元フォントファイルのパスをコピペします。

カスタママイズしたファイルはwebfontというフォルダにいれたいので、コピペして元を消します。

で次に③にサブセット化した文字をコピペするので
先ほどご紹介させていただいたU-618WEB様のサイトにいって

JIS第1水準＋常用漢字＋その他でまとめると（3759字）の部分をコピペしてきて③貼り付けます。

すべて入力したら、チェックが書体名を変更するにチェックが入っていないことを確認して作成開始をクリックして完成です。

webfontの中にサブセット化されてファイルが新しくできました。

サブセットする前と比較すると

5.45Mから984KBにまでファイルを軽くすることができました。

簡単な作業でサブセット化することができました。
残りのファイルのNotoSansJP-Bold.ttfも同じ手順でサブセット化してください。

③サブセット化したフォントをwebフォントに変換

お次はサブセット化したttfのファイルをwebフォントとして使えるようにファイル形式を変換していきます。

拡張子woff2などのファイルに変換してwebフォントとして使用できるようにします。

変換する方法はこちらもまたフリーソフト

武蔵システム様のWOFFコンバーターを使わせていただきます。

こちらもサイトを開くとページ下部にダウンロードがありますのでご自身の環境にあったファイルをダウンロードしてインストールしてください。

インストールしてソフトを立ち上げると下記のような画面が出ます。

使用方法をご説明します。

①webfontフォルダにある先ほどサブセット化したファイルを参照ボタンをクリックして読み込みます。

②変換後のファイルを保存する場所とファイル名を指定します。参照からはうまくいかなかったので、先ほどと同様に変換前ファイルの部分からパスをコピペしてきました。

③WOFFファイル以外にも作成しますかってところなので、WOFF2とEOTもチェックをいれて作成します。

それでは使っていきます。

①の変換前ファイルの参照をクリックして、「webfont」の中にいれているサブセット化された

NotoSansJP-Black.ttfを選択します。

次に②の変換後ファイルは変換後のファイルを保存する場所とファイル名を指定するのですが、こちら先ほど同様参照がうまく動かなかったので
変換前ファイルのパスをコピペします。

コピペの時に拡張子.ttfは消してください。

最後に③のWOFF2を作成するとEOTファイルを作成するにチェックをいれて

変換開始で完了です。

これで簡単にファイルを変換できました。同じ作業でNotoSansJP-Bold.ttfもファイルを変換してください。

変換が完了したwebfontフォルダの中はこんな感じ

拡張子eot・ttf・woff・woff2のファイルができました。

これでファイルの準備ができましたので、

上記の8個のファイルが入っているwebfontファイルを自社のホームページが公開されている同じサーバーにアップロードします。アップロードする場所はどこでもよいですが、今回はCSSフォルダやimg(image)フォルダと同階層に設置しました。

サブセット化とファイル変換が出来たら自社のサーバーにアップロード

④CSSでウェブフォントを使用できるように設定

こちらで最後になります。ファイルの準備ができてアップロードが完了したのであとはCSSに記述してwebフォントが使えるようにします。

CSSは

@font-face

を使ってファイルを読み込みます。

CSSの先頭に下記CSSを記述します。
今回使用するフォントは違うウエイト（違う文字の太さ）もありますのでその場合は下記のような記述になります。

@font-face {
	font-family: "Noto Sans JP";
	src:
	url("../webfont/NotoSansJP-Bold.woff2")format("woff2"),//最優先
	url("../webfont/NotoSansJP-Bold.woff")format("woff"),
	url("../webfont/NotoSansJP-Bold.eot")format("embedded-opentype"),
	url("../webfont/NotoSansJP-Bold.ttf")format("truetype")
	;
	font-weight: 700;
	font-display: swap;
}

@font-face {
	font-family: "Noto Sans JP";
	src:
	url("../webfont/NotoSansJP-Black.woff2")format("woff2"),//最優先
	url("../webfont/NotoSansJP-Black.woff")format("woff"),
	url("../webfont/NotoSansJP-Black.eot")format("embedded-opentype"),
	url("../webfont/NotoSansJP-Black.ttf")format("truetype")
	;
	font-weight: 900;
	font-display: swap;
}

説明していきます。

２行目はフォントの名前を決めています。こちらは任意でOKです。notosansを使っていてもminchouとかにしても大丈夫ですが、無難にわかりやすく、もともとのグーグルフォントで決められている名前のままにしています。後程指定するのが混乱しないので。

4～7行目で先ほどサブセット化したファイル達を読み込んでいます。今回はCSSフォルダと同階層にウェブフォントを入れたフォルダwebfont置いたので

読み込みパスは../webfont/となっています。

9行目がウエイトで
10行目がウェブフォントが読み込まれるまでにほかのテキストを読みこませるための記述です。

13行目からはウエイト（文字の太さ）900のファイルを読み込んでいます。

ちなみにここで使用しているウエイトの数字はグーグルフォントのサイトに書いてあります。

英語と数字の関係性はこんな感じです。

これでwebフォントが使用できるようになりました。@font-faceで読み込むだけです。

あとは使いたいところにいつも通り指定するだけです。

例）

body{
	
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}
h1{
	
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 900;
}

以上になります。

こちらで、グーグルフォントをサブセット化（文字を厳選して）とwebフォントとして使えるようにファイルを変換して、自社のサーバーに設置することができました。


これで自社サイトを見てみると・・・
爆速化してませんか？？個人的には体感でわかるぐらい変化しています。

携帯のグーグルクロームでチカチカしていたマリオ君のサイトもスムーズに表示されるようになりました。

サイトの表示速度を図るPageSpeed Insightsの数字も改善されていると思いますし、（数字がかなり変動するのであまりあてにならない？？）、体感でもかなり速くなってると思います。

webフォントを使用していてサイトがちょっと重いなと思ったら是非今回の自社サーバーに直接設置を試してみてください。

それではまた。