マイティーBlog|リスティング広告やWEBマーケティング情報

トップページ ブログ > お役立ち > 【備忘録】WEBフォント軽量化でページを爆速読み込み!

Mighty Ace Blog

マイティーBlog

お役立ち

2021.07.09

【備忘録】WEBフォント軽量化でページを爆速読み込み!

先日、どうしてもサイト全体で「Noto Sans」を使わないといけないという事があり、

WEBフォントを使用すると遅くなりがちなページ読み込みを

爆速でしてもらう為の軽量化(サブセット化)と、

サブセット化したファイルの読み込み方について、備忘録も兼ねて紹介します!

 

・そもそもなんでWEBフォントを軽量化するの?

欧米フォントはそもそも字数が少なく、

サーバーからWEBフォントを読み込んでも約250KB程度。

対して日本語フォントはひらがな、カタカナ、そして大量の漢字によって

容量が約16MBほどにまで跳ね上がります。

このおかげで、フォントの読み込みでサイトの表示が遅くなり・・・離脱…。

といった事態が起きてしまうわけです。

その為に行うのがサブセット化です!

 

・サブセット化の方法

以前、本ブログでも紹介した

<link href="https://fonts.googleapis.com/css?family=Odibee+Sans&display=swap&text=ここに使いたい文字" rel="stylesheet">

というhead内に使用する文字だけ記述する方法もありますが

こちらは見出しだけ、英字だけ、といった文字数が限られている場合に役立ちます!

 

今回紹介するのは

サイト本文全体でWEBフォントを使用する場合など

文字数がかなり多い場合に有効な方法になります。

 

①Googleからフォントファイルをダウンロード

Noto SansのDLページはこちらになります。

 

▼Noto Sansのダウンロードページ
https://www.google.com/get/noto/#/family/noto-sans-jpan

 

②DLしたファイルから、使いたい文字だけ抜き出す

ひらがな、カタカナ、英数字はともかく

漢字って何が要るんだ!?となりますよね。

 

日本語には「常用漢字」と呼ばれる2136字があり、

通常の文章ではそれ以外の漢字を使用する事は滅多にありません。

「常用漢字」で検索すると簡単に一覧が手に入りますよ!

 

次に、サブセットフォントメーカーで

常用漢字+ひらがな・カタカナ・英数字のみを抜き取ったフォントファイルを作成します。

私は下記のフリーソフトを使用してみました。

他にも検索すると沢山あるので、好みのものを使ってみてください。

 

▼サブセットフォントメーカーのダウンロードページ
https://opentype.jp/subsetfontmk.html

 

③ファイル形式を変える

DLした状態だと.otf形式になっているので、ブラウザ表示用の形式に変換しましょう!

この時最低限あると良いフォントファイル形式は以下です

 

.woff
主にPCのブラウザで使用
.ttf
主にスマホで使用

 

ファイル形式の変換についても

WEB上で行ってくれるフリーのサービスがあるので検索してみてください!

私が利用しているのはコチラ

 

▼Convertio — ファイルコンバーター
https://convertio.co/ja/

 

④フォントファイルをディレクトリに設置し、@font-faceで読み込ませる

前提として今回は

font—各フォントファイル
css—stylecss
index.html

という階層になっています。

この状態で、CSSに@font-faceを記述してフォントを読み込ませます。

@font-face {
font-family: 'notosans';/*自分で好きな名前を付ける*/
src: url('../font/notosans_medium.ttf') format('truetype'), url('../font/notosans_medium.woff') format('woff'),
url('../font/notosans_bold.ttf') format('truetype'),
url('../font/notosans_bold.woff') format('woff');/*パスとフォーマットを指定*/
}

format(”)の中身は

.woffならwoff

.ttfならtruetype

と記述しましょう!

body {
font-family: 'notosans';/*@font-faceで指定した名前*/
}

最後にbodyにfont-familyを記述してあげれば設定完了です!!

 

まとめ

WEBフォントってオシャレで雰囲気があって、

游ゴシックじゃちょっと…という時に使いがちではないでしょうか?

 

是非サブセットを駆使して、

表示速度を最適化させたままWEBフォントを使ってみましょう!!

この記事に関連するタグ

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

正しい効果測定は、正しい計測設定から!Googleアナリティクス設定項目チェックシート(無料)

Googleアナリティクスは、適切な初期設定を行って初めて、解析に役立つデータを計測できます。 正しい効果測定を行う上で、必要な設定項目のチェックシートをご用意しました。

Googleアナリティクス,アクセス解析でWeb集客分析・改善なら福岡のマイティーエース

リスティング・Googleアナリティクス・ホームページ・ランディングページなど
Webマーケティングのことなら何でもご相談ください

株式会社マイティーエースでは、様々なWeb広告・Webマーケティングなど
お客様に合ったご提案しています。
興味をお持ちいただけた方は、まずは気軽にご相談ください。

あわせて読みたい人気の記事

よく見られている記事

最新記事

BLOG MENU

株式会社マイティーエースのSNSもチェックしてみてください

Copyright (c)2014-2020 MightyAce, inc. All Right Reserved.