Webフォントはウェブデザインにフォントの自由度を与え、可読性とデザイン性を大いに引き上げてくれる素敵な技術ですが、一方で導入の足枷があることも知られています。

1. 日本語に対応したフォントが少ない。
2. フォント自体の読み込みに時間がかかる。

しかし、最近は Google Web Fonts に日本語フォント(Noto Sans Japanese)が登場し、jQueryプラグインのようにCDNとして日本語ウェブフォントを使えるようになったようです。

そこで、今回はGoogleの日本語ウェブフォントの読み込みにどれくらい時間がかかるのか試してみました。

測定サイトは、GTmetrix です。

通常フォントのページはコチラ

ワードプレスのデフォルトフォントがあてられています。
まぁ、無難な印象のフォントです。

< Chromeでの表示 >
Page load time: 3.36s
Total page size: 818KB
Total number of requests: 31

< IE11での表示 >
Page load time: 3.31s
Total page size: 816KB
Total number of requests: 31

そして、Googleの日本語Webフォントのページがコチラです。

字面の印象も明るく、太字にも表情があって素敵ですね!

< Chromeでの表示 >
Page load time: 3.56s
Total page size: 823KB
Total number of requests: 31

< IE11での表示 >
Page load time: 3.73s
Total page size: 819KB
Total number of requests: 32

結論:Webフォントを扱う方が、ページの読込時間が約5~13%くらい遅くなるようです。

思ったよりはずっと軽かったので良かったです。

この調子で、CDNのように扱える日本語ウェブフォントが増えていったら、ウェブ制作もずっと楽しくなるでしょうね!

参照サイト:

Google・AdobeオープンソースのNoto Sans fontがジワジワ凄い
無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた

カテゴリー: WEB体験談

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です