HTML/CSS

Googleフォントの読み込みを高速化する方法

公開日 2022/11/25 最終更新日 2022/12/04

Googleフォントにひと手間加えるだけでWebページの表示速度を改善出来ます。当記事ではその方法を詳しく解説していきます。

1 Googleフォントのデメリット
2 Googleフォントの読み込みを高速化する
3 まとめ

Googleフォントのデメリット

Googleフォントは無料で簡単に導入出来て、OS間でサポートされているフォントの差をカバー出来るのでとても便利です。

ただファイルの容量が大きいため、Webページの表示遅延の原因になる可能性があります。特に日本語のフォントはサポートしている文字数が多く、ファイルの大きさが10MBを超えている事があります。

Googleフォントの読み込みを高速化する

Googleフォントの読み込みを高速化する方法を手順に分けて解説していきます。

前提条件

今回はGoogleフォントのNoto Sans JPを使用して解説していきます。Noto Sans JPはGoogleが開発した日本語のフォントですのでWebフォントにしかありません。

フォントをダウンロードする

Webフォントをダウンロードします。CDNで利用されている方が多いですが、実はダウンロードしてサーバーに設置した方が読み込み速度としては速いです。

ブラウザはHTMLの中にCSSやJavaScriptの記述を見つけると、HTMLの描画を止めてCSSやJavaScriptのコードの実行を行います。

Google FontはCSSを経由してフォントファイルを読み込むので、フォントファイルのダウンロードが完了するまで画面に何も表示されない時間が発生します。これが結果的に読み込みが遅いと言われる理由です。

前置きが長くなりましが、Google Fontsの公式サイトへ移動して、フォントをダウンロードします。

インストールしたいフォントの詳細ページへ移動すると、ページの右上にダウンロードボタンがあるのでクリックします。

そすると、zipファイルがダウンロードされるので、解凍してファイルの中身を確認しましょう。

フォントをサブセット化する

フォントファイルのダウンロードが完了したら、フォントのサブセット化を行います。

サブセット化とは、フォントファイルから使用する文字のみを抽出し、ファイルの容量を小さくする事です。

例えば、日本語のフォントファイルには以下の文字が入っています。

ひらがな
カタカナ
JIS第1水準漢字
JIS第2水準漢字
全角英数字
半角英数字
記号

特に漢字はとても種類が多く、JIS第1水準漢字は2965文字、JIS第2水準漢字は3990文字もあります。2つを合計すると6955文字。めちゃくちゃ多いですね笑。

日本語のフォントファイルをサブセット化する場合は、「常用漢字」・「ひらがな」・「カタカナ」・「全角英数字」・「半角英数字」・「記号」の組み合わせで行えば基本的に問題は無いかと思います。

サブセット化を行うためにはサブセット化用のツールが必要です。

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

サブセットフォントメーカーはフリーソフトでフォントファイルのサブセット化が出来ます。お持ちでない方はダウンロードして使ってみてください。

サブセット化の手順

①サブセット化するフォントファイルの選択

サブセット化したいフォントファイルを選択します。

②サブセット化後のフォントファイルの名前と保存場所を選択

サブセット化したフォントファイルをPC内のどのフォルダにどの名前で保存するのかを指定します。

③フォントファイルに含める文字を入力します

サブセット化するフォントファイルに含める文字を入力します。今回は下記の文字でフォントファイルを作成します。※長いのでコピペを推奨します。

亜哀愛悪握圧扱安暗案以位依偉囲委威尉意慰易為異移維緯胃衣違遺医井域育一壱逸稲芋印員因姻引飲院陰隠韻右宇羽雨渦浦運雲営影映栄永泳英衛詠鋭液疫益駅悦謁越閲円園宴延援沿演炎煙猿縁遠鉛塩汚凹央奥往応押横欧殴王翁黄沖億屋憶乙卸恩温穏音下化仮何価佳加可夏嫁家寡科暇果架歌河火禍稼箇花荷華菓課貨過蚊我画芽賀雅餓介会解回塊壊快怪悔懐戒拐改械海灰界皆絵開階貝劾外害慨概涯街該垣嚇各拡格核殻獲確穫覚角較郭閣隔革学岳楽額掛潟割喝括活渇滑褐轄且株刈乾冠寒刊勘勧巻喚堪完官寛干幹患感慣憾換敢棺款歓汗漢環甘監看管簡緩缶肝艦観貫還鑑間閑関陥館丸含岸眼岩頑顔願企危喜器基奇寄岐希幾忌揮机旗既期棋棄機帰気汽祈季紀規記貴起軌輝飢騎鬼偽儀宜戯技擬欺犠疑義議菊吉喫詰却客脚虐逆丘久休及吸宮弓急救朽求泣球究窮級糾給旧牛去居巨拒拠挙虚許距漁魚享京供競共凶協叫境峡強恐恭挟教橋況狂狭矯胸脅興郷鏡響驚仰凝暁業局曲極玉勤均斤琴禁筋緊菌襟謹近金吟銀九句区苦駆具愚虞空偶遇隅屈掘靴繰桑勲君薫訓群軍郡係傾刑兄啓型契形径恵慶憩掲携敬景渓系経継茎蛍計警軽鶏芸迎鯨劇撃激傑欠決潔穴結血月件倹健兼券剣圏堅嫌建憲懸検権犬献研絹県肩見謙賢軒遣険顕験元原厳幻弦減源玄現言限個古呼固孤己庫弧戸故枯湖誇雇顧鼓五互午呉娯後御悟碁語誤護交侯候光公功効厚口向后坑好孔孝工巧幸広康恒慌抗拘控攻更校構江洪港溝甲皇硬稿紅絞綱耕考肯航荒行衡講貢購郊酵鉱鋼降項香高剛号合拷豪克刻告国穀酷黒獄腰骨込今困墾婚恨懇昆根混紺魂佐唆左差査砂詐鎖座債催再最妻宰彩才採栽歳済災砕祭斎細菜裁載際剤在材罪財坂咲崎作削搾昨策索錯桜冊刷察撮擦札殺雑皿三傘参山惨散桟産算蚕賛酸暫残仕伺使刺司史嗣四士始姉姿子市師志思指支施旨枝止死氏祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治璽磁示耳自辞式識軸七執失室湿漆疾質実芝舎写射捨赦斜煮社者謝車遮蛇邪借勺尺爵酌釈若寂弱主取守手朱殊狩珠種趣酒首儒受寿授樹需囚収周宗就州修愁拾秀秋終習臭舟衆襲週酬集醜住充十従柔汁渋獣縦重銃叔宿淑祝縮粛塾熟出術述俊春瞬准循旬殉準潤盾純巡遵順処初所暑庶緒署書諸助叙女序徐除傷償勝匠升召商唱奨宵将小少尚床彰承抄招掌昇昭晶松沼消渉焼焦照症省硝礁祥称章笑粧紹肖衝訟証詔詳象賞鐘障上丈乗冗剰城場壌嬢常情条浄状畳蒸譲醸錠嘱飾植殖織職色触食辱伸信侵唇娠寝審心慎振新森浸深申真神紳臣薪親診身辛進針震人仁刃尋甚尽迅陣酢図吹垂帥推水炊睡粋衰遂酔錘随髄崇数枢据杉澄寸世瀬畝是制勢姓征性成政整星晴正清牲生盛精聖声製西誠誓請逝青静斉税隻席惜斥昔析石積籍績責赤跡切拙接摂折設窃節説雪絶舌仙先千占宣専川戦扇栓泉浅洗染潜旋線繊船薦践選遷銭銑鮮前善漸然全禅繕塑措疎礎祖租粗素組訴阻僧創双倉喪壮奏層想捜掃挿操早曹巣槽燥争相窓総草荘葬藻装走送遭霜騒像増憎臓蔵贈造促側則即息束測足速俗属賊族続卒存孫尊損村他多太堕妥惰打駄体対耐帯待怠態替泰滞胎袋貸退逮隊代台大第題滝卓宅択拓沢濯託濁諾但達奪脱棚谷丹単嘆担探淡炭短端胆誕鍛団壇弾断暖段男談値知地恥池痴稚置致遅築畜竹蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷鋳駐著貯丁兆帳庁弔張彫徴懲挑朝潮町眺聴脹腸調超跳長頂鳥勅直朕沈珍賃鎮陳津墜追痛通塚漬坪釣亭低停偵貞呈堤定帝底庭廷弟抵提程締艇訂逓邸泥摘敵滴的笛適哲徹撤迭鉄典天展店添転点伝殿田電吐塗徒斗渡登途都努度土奴怒倒党冬凍刀唐塔島悼投搭東桃棟盗湯灯当痘等答筒糖統到討謄豆踏逃透陶頭騰闘働動同堂導洞童胴道銅峠匿得徳特督篤毒独読凸突届屯豚曇鈍内縄南軟難二尼弐肉日乳入如尿任妊忍認寧猫熱年念燃粘悩濃納能脳農把覇波派破婆馬俳廃拝排敗杯背肺輩配倍培媒梅買売賠陪伯博拍泊白舶薄迫漠爆縛麦箱肌畑八鉢発髪伐罰抜閥伴判半反帆搬板版犯班畔繁般藩販範煩頒飯晩番盤蛮卑否妃彼悲扉批披比泌疲皮碑秘罷肥被費避非飛備尾微美鼻匹必筆姫百俵標氷漂票表評描病秒苗品浜貧賓頻敏瓶不付夫婦富布府怖扶敷普浮父符腐膚譜負賦赴附侮武舞部封風伏副復幅服福腹複覆払沸仏物分噴墳憤奮粉紛雰文聞丙併兵塀幣平弊柄並閉陛米壁癖別偏変片編辺返遍便勉弁保舗捕歩補穂募墓慕暮母簿倣俸包報奉宝峰崩抱放方法泡砲縫胞芳褒訪豊邦飽乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貿防北僕墨撲朴牧没堀奔本翻凡盆摩磨魔麻埋妹枚毎幕膜又抹末繭万慢満漫味未魅岬密脈妙民眠務夢無矛霧婿娘名命明盟迷銘鳴滅免綿面模茂妄毛猛盲網耗木黙目戻問紋門匁夜野矢厄役約薬訳躍柳愉油癒諭輸唯優勇友幽悠憂有猶由裕誘遊郵雄融夕予余与誉預幼容庸揚揺擁曜様洋溶用窯羊葉要謡踊陽養抑欲浴翌翼羅裸来頼雷絡落酪乱卵欄濫覧利吏履理痢裏里離陸律率立略流留硫粒隆竜慮旅虜了僚両寮料涼猟療糧良量陵領力緑倫厘林臨輪隣塁涙累類令例冷励礼鈴隷零霊麗齢暦歴列劣烈裂廉恋練連錬炉路露労廊朗楼浪漏老郎六録論和話賄惑枠湾腕
あいうえおかきくけこさしすせそたちつてとなにぬねのはひふへほまみむめもやゆよらりるれろわゐゑをんがぎぐげござじずぜぞだぢづでどばびぶべぼぱぴぷぺぽぁぃぅぇぉっゃゅょ
アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヰヱヲンガギグゲゴザジズゼゾダヂズデドバビブベボパピプペポァィゥェォッャュョヴ
ａｂｃｄｅｆｇｈｉｊｋｌｍｎｏｐｑｒｓｔｕｖｗｘｙｚＡＢＣＤＥＦＧＨＩＪＫＬＭＮＯＰＱＲＳＴＵＶＷＸＹＺ０１２３４５６７８９
abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789
①②③④⑤⑥⑦⑧⑨⑩⑪⑫⑬⑭⑮⑯⑰⑱⑲⑳ⅠⅡⅢⅣⅤⅥⅦⅧⅨⅩ!@~`#$%^&*()_-+=\|}{]['";:/?.,<> 　！＠〜｀＃＄％＾＊（）＿ー＝＋｜￥｝｛'"：；・？＞。、＜「」『』¡¢£¤¥¦§¨©ª«¬¯°±²³´µ¶·¸¹º»¼½¾¿，．゛゜￣ヽヾゝゞ〃仝〆―‐／＼∥...‥'"〔〕［］〈〉《》【】－×÷≠≦≧∞∴♂♀′″℃￠￡＆☆★○●◎◇◆■△▲▽▼※〒→←↑↓〓∈∋⊆⊇⊂⊃∪∩∧∨￢⇒⇔∀∃∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬Å‰♯♭♪†‡◯─

④作成開始・ファイル確認

サブセット化フォントファイルの作成を開始します。作成が成功したら指定した保存先にファイルが作られているか確認しましょう。フォントファイルが複数ある場合は①〜⑤を繰り返し行います。

試しにNoto Sans JP Regularのサブセット化を行いましたが、変換前に4.5MBあったファイルが461KBまで軽量化する事が出来ました。

サブセット化したフォントをwoff形式に変換する

フォントファイルのサブセット化が完了したら、フォントファイルの形式の変更を行います。

フォントファイルにはいくつか形式があります。

.otf
.ttf
.woff
.woff2

ブラウザによって対応しているフォントファイル形式が異なりますが、ここではモダンブラウザでサポートされており、一番圧縮率が高い「woff2」形式にフォントファイルを変換します。

Can I Use woff2

フォントファイルのファイル形式の変換もそれ専用の変換ツールを使用します。

WOFFコンバータ

WOFFコンバータはフリーソフトでフォントファイルの形式の変換が出来ます。お持ちでない方はダウンロードして使ってみてください。

フォントファイルの形式を変換する手順

①サブセット化したフォントファイルを選択

サブセット化したフォントファイルを選択します。

②変換後のファイルの名前と保存場所を指定

ファイル形式変換後のファイル名と保存場所を指定します。

③変換するファイル形式を選択

どのファイル形式に変換するのかをチェックします。今回は「WOFF2を作成する」にチェックします。それ以外の箇所のチェックは外しましょう。

④作成開始＆ファイル確認

WOFF2形式でフォントファイルの作成を開始します。作成が完了したら指定した場所にファイルが作られているか確認しましょう。

フォントファイルが複数ある場合は①〜⑤を繰り返し行います。

試しにOTF形式からWOFF2形式に変換したところ、461KBから326KBに軽量化されていました。サブセット化ほどでは無いですが、ファイル形式が変わるだけでの容量も変わりますね。

フォントファイルの変換が完了したら、使用するディレクトリに移動させましょう。

@font-faceでフォントファイルを読み込む

フォントファイルの準備が完了したら、フォントをWebページで表示させるためにCSSで読み込みます。

@font-face MDN

CSSの@font-faceプロパティでフォントファイルの読み込みを行いましょう。

@font-face {
  font-family: "フォントファイル名";
  font-style: normal;
  font-weight: "フォントの太さ";
  font-display: optional; // フォントの表示の挙動を指定します。
  src: url("フォントファイルのパス") format("フォントファイルの形式");
}

@font-faceのプロパティを1つずつ解説していきます。

font-family

@font-face {
  font-family: "ここに書いた名前がCSSファイル内でのフォント名になる";
}

@font-face内に書くfont-familyは読み込むフォントファイルの名前の設定です。通常のプロパティのfont-familyと意味合いが異なります。

ここに書いた名前がCSSファイル内のfont-familyプロパティに書くフォント名になります。

例えば@font-faceのfont-familyを「My Noto Sans JP」とした場合は、その@font-faceで読み込んでいるフォントファイルの名前は「My Noto Sans JP」になります。

@font-face {
  font-family: "My Noto Sans JP";
}

// ↑のfont-faceで読み込んだフォントを使用する
body {
  font-family: "My Noto Sans JP", sans-serif;
}

font-weight

font-weightは読み込みたいフォントファイルと同じ太さの値を指定しましょう。ここに指定した太さがフォントに適用されます。

ちなみに複数のウェイトのフォントを使用したい場合は、ウェイトごとのフォントファイルを全て@font-faceで読み込みましょう。

// Noto Sans JP Regular
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url("../font/Noto-Sans-JP-Regular.woff2") format("woff2");
}

// Noto Sans JP Medium
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url("../font/Noto-Sans-JP-Medium.woff2") format("woff2");
}

// Noto Sans JP Bold
@font-face {
  font-family: "Noto Sans JP";
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url("../font/Noto-Sans-JP-Bold.woff2") format("woff2");
}

このように指定することで、font-weightでフォントの太さを変更出来ます。

font-display

font-displayプロパティは、ブラウザがフォントをダウンロードされるまでの表示方法を指定します。

通常フォントはダウンロードされるまで、Webページにテキストは表示されません。font-displayを指定すると、フォントがダウンロードされている間に代替のフォントでテキストを表示します。

font-display MDN

例のコードではfont-display: optionalを指定していますが、フォントを使用する環境によってプロパティの最適解は異なるので、必ず確認のうえ使用しましょう。

src・format

srcプロパティは@font-faceプロパティで読み込ませたいフォントファイルのパスを指定します。特に記述のルールなどは無く、画像などと同じようにパスを指定します。

なおWordPressのサイトの場合はテーマディレクトリのパスが必要になるので注意しましょう。

format関数は、読み込むフォントファイルの形式を指定します。指定出来る形式はwoff, woff2, truetype, opentype, embedded-opentype, svgです。

srcとformatは1セットで覚えてしまいましょう。カンマ区切りで複数のフォントファイルを指定することも出来ます。

@font-face {
  src: url("../font/Noto-Sans-JP-Regular.woff2") format("woff2"),
       url("../font/Noto-Sans-JP-Regular.woff2") format("woff");
}

フォントファイルをプリロードする

この手順は必須では無いですが、フォントファイルをプリロードさせるとフォントの表示を早くする事が出来ます。

プリロードはHTMLのlinkタグで行います。

<link rel="preload" href="fonts/〇〇〇.woff2" as="font" type="font/woff2" crossorigin>

HTMLのheadタグの中に<link rel="preload">を設置し、href属性にはプリロードさせたいフォントファイル名のパスを書きましょう。

WordPressのサイトの場合は、テーマディレクトリまでのパスが必要になるので下記のように記述します。

<link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/〇〇〇.woff2" as="font" type="font/woff2" crossorigin>

<link rel="preload">は、@font-faceでフォントを読み込んでいるCSSファイルよりも先に書きましょう。CSSファイルの方が先になってしまうとフォントの読み込みが始まってしまうので、プリロードの意味が無くなります。

また、as属性やtype属性などプリロードするファイルによって指定する値が決まっているので、正しい値になっているかも確認しましょう。

リンク種別：preload MDN

まとめ

Googleフォントの読み込みを高速化する方法について解説しました。

PageSpeed Insightsで高速化対応前と後で計測すると、サイトによってはかなりの速度改善に繋がりますので、Googleフォントを使用している場合はぜひ記事で紹介した方法を試してみてください。

最後までお読みいただきありがとうございました！！