お問い合わせはコチラから

Google fontsの見た目そのままにサブセット化する手順

サイト運営

Google fontsは端末によらずフォントが固定になるのでデザインの崩れなどを考えなくてよいので大変便利です。

ところが、日本語のGoogle fontsはCDNからの読み込みに工夫されているので十分速いのですが、トータルサイズが大きいのでネットワークの環境や速度に依存してしまいます。それを回避しようと色々な方法がありますが、今度は非同期で読み込むとちらつく問題があります。

いいかげん嫌になったので、Google fontsをセルフホストしてサブセット化しようと思いました。ネットに転がっている情報そのまま行ったところ、同じフォントなのに見た目が変わってしまいました。

この記事では、CDN経由で読み込んでいるGoogle fontsと全く同じ見た目になるようにサブセット化する手順をまとめています。

Google fontsのサブセット化でダメだった方法

いつも読み込んでいるGoogle fontsと違うせいなのかわかりませんが、この手順でサブセット化したフォントを読み込むとフォントの見た目が変わってしまいました。

いつも読み込んでいるGoogle fontsと違うものなのかもしれないし、最初は仕方ないかな?と思ったのですが、あまりにも見た目が変わってしまったのでこの方法は採用しませんでした。

①いつもと違うGoogle fontsのサイトからダウンロードする

Download familyをクリックしてzipをダウンロードします。

Google Fonts: Noto Sans Japanese
Noto is a global font collection for writing in all modern and ancient languages. Noto Sans JP is an unmodulated (“sans serif”) design for the Japanese language

②サブセットメーカーとWOFFコンバーターで変換

ダウンロードしたotfファイルをサブセットメーカに入力して、その後、WOFFに変換します。

サブセットメーカー

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

変換元のフォントとしては、TrueTypeフォント(拡張子 .ttf、.ttc)、OpenTypeフォント(拡張子.otf、.ttc)を指定できます。

サブセットの指定は面倒なので以下のサイトのものを使います。

「JIS第1水準+常用漢字+その他でまとめると(3759字)」

日本語WEBフォントをサブセット化する際の参考文字列一覧 | U-618WEB
WEBフォントをサブセット化して使用する際に参考になるかもしれない文字列一覧です。 Noto sansの軽量化

woffコンバーター

WOFFコンバータ

③woff/woff2をサーバーにアップロードする

フォントファイルをサーバーにアップロードして格納します。

CSSでそのファイルの場所を指定するので、メモしておきます。

④CSSに記述を追加

フォントをアップロードしたパスに書き換えて、追加CSSなどに貼り付けます。

@font-face {
  font-family: "NotoSansJP-Regular-subset";
  src: url("path-to-fontfile/NotoSansJP-Regular-subset.woff2") format("woff2"),
       url("path-to-fontfile/NotoSansJP-Regular-subset.woff") format("woff");
}
body {
  font-family: "NotoSansJP-Regular-subset",sans-serif;
}

CDNのGoogle fontsと同じファイルからサブセットを作成する手順

よく知られた手順でサブセット化したら、見た目が変わってしまったので、別の方法を検討しました。

こちらの手順で行うと、サブセット化+セルフホストしても見た目は全く変わりません。

①google-webfonts-helperからフォントをダウンロード

google webfonts helperという便利なサイトがあって、いつも使っているCDNのフォントをそのままダウンロードしてくれます。

私は、japaneseとlatinを選択して、regularと700に✓してダウンロードしました。

google webfonts helper
A Hassle-Free Way to Self-Host Google Fonts. Get eot, ttf, svg, woff and woff2 files + CSS snippets!

zipファイルにはサブセットメーカーに入力できる形式のフォントが含まれていないので、変換する必要があります。

②woff⇒otf形式に変換

otf形式に変換するソフトが必要になりますが、実はすでにあります。

WOFFコンバーターは、woffファイルを入力に指定して変換するとotfファイルを出力してくれます。

③サブセットメーカーでサブセットを作成しwoffに変換

既に行っている手順と同じなので割愛します。

④woffとwoff2をサーバーにアップロードします

フォルダを作って分かりやすいところにアップロードします。

⑤CSSに記述を追加

フォントをアップロードしたパスに書き換えて、追加CSSなどに貼り付けます。

display:swapをつけないと初回読み込み時に文字が表示されない期間が出てしまいます。

/* noto-sans-jp-regular - latin_japanese */
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  
  src: url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-regular-subset.woff2') format('woff2'), 
       url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-regular-subset.woff') format('woff')
} 
@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  
  src: url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-700-subset.woff2') format('woff2'), 
       url('/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-700-subset.woff') format('woff')
} 

⑥preloadを追加

フォントファイルの読み込みを高速化するためpreloadを追加します。

add_action('wp_head',function(){
?>
  <link
    rel="preload"
    as="font"
    type="font/woff2"
    href="/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-regular-subset.woff2"
    crossorigin
  />
  <link
    rel="preload"
    as="font"
    type="font/woff2"
    href="/wp-content/themes/mysite/fonts/noto-sans-jp-v36-latin_japanese-700-subset.woff2"
    crossorigin
  />
<?php
});

サブセット化するとどれぐらいファイルサイズが小さくなるのか?

1サイズ=2MBぐらいのフォントファイルが500kBぐらいまで小さくなりますので、サブセット化前後で約1/4のサイズになります。

まとめ

一回つまずきましたが、 google-webfonts-helperからダウンロードしたフォントファイルを使ってサブセット化したところ、今までと同じように表示することができました。

これでgoogle fonts周りのストレスはだいぶ少なくなりました。

この記事が気に入ったら フォローしよう
最新情報をお届けします。
この記事を書いた人
ブーン

はるばる日本よりオランダ王国へやってまいりました。
自分の経験が少しでも参考になれば嬉しいです。
お問い合わせは、『こちら』からお願い致します。

\ブーンをフォロー/
スポンサーリンク
サイト運営
\シェアお願いします!/
\ブーンをフォロー/

失敗しないレンタルサーバーランキング

mixhost

不正アクセスに強くて使いやすいおススメサーバー
\本サイトで利用中/
メリット①:自動ウィルス駆除対応
メリット②:サイトの表示速度が速い!
メリット③:転送量の上限が多い!
メリット④:自由にプラン変更ができ、アクセス増にも対応できる!
メリット⑤:バックアップデータが無料で復元できる!
メリット⑥:Wordpressが簡単にインストールできる!
メリット⑦:どのプランでも初期費用が無料!
メリット⑧:10日間の無料お試し期間と30日の返金保証!

Conoha Wing

国内Wordpress最速の最強サーバー
メリット①:圧倒的な表示速度
メリット②:レンタルサーバーと独自ドメインがセットでお得◎
メリット③:プラン変更はすべてのプランで自由自在
メリット④:一か月の利用転送量の制限が緩い(9TB~)
メリット⑤:WordPresサイトの移行が簡単

エックスサーバー

国内シェアNo1の安定性と実績が魅力。ALL SSDで死角なしの万能サーバー。
メリット①:サイトの表示速度が安定して速い!
メリット②:アクセス負荷に強くて安定性が高い!
メリット③:24時間365日の充実サポートで安心!電話サポートもあり!
メリット④:転送量が多い!
メリット⑤:自動バックアップ機能付き!
メリット⑥:WordPressが簡単にインストールできる!
メリット⑦:10日の無料お試し期間がある!

オランダで生きていく
タイトルとURLをコピーしました