必要な文字だけ指定してGoogleフォントを最も軽量に呼び出す方法

google-fonts-select
このエントリーをはてなブックマークに追加
PR

Google Fonts といえば

1000をも超える英字フォントが無料で、CDNで使えるサービスなんですが

読み込むフォントのウェイトを指定して、必要なものだけ呼び出す事ができるのはよく知られているかと思います

 

例えば lato というフォントには

イタリックも含めると 10種もあります

screenshot00126

これを全部使うことは基本的無いでしょうから

 

さらに、WEBフォントを部分的に使って

タイポグラフィとして利用することも多いでしょう

日本語の場合は、英字だけWEBフォントにして利用するというのはまれで

日本語フォントと英字フォントにばらつきがでて、文字の見栄えが良くなくなってしまいますので

 

日本におけるこういった無料のWEBフォントの役割は

英字しか使わないところ、ロゴの一部 という使い方で

フォントにある全ての文字を読み込む必要がなく、どんな文字が使われるかを予測するのも簡単です

そこで、Google Fonts の必要な文字だけを読み込ませるという方法で

WEBフォントをもっと軽くして取り扱うことが出来ます

 

 

Google Fonts で必要な文字列だけを取得する方法

Lato を例に上げると通常のフォントの読み込みは linkタグで

<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>

このようになりますね

 

ここに必要な文字を指定します

family=lato:300 のあとに付け足します

<link href='http://fonts.googleapis.com/css?family=Lato:300&text=9ineBBWEB×DESIGNCREATIVE' rel='stylesheet' type='text/css'>

このようにします

 

&text= そのあとに必要な文字を書きます

当サイトのロゴは 「9ineBB WEB×DESIGN×CREATIVE」 こういった部分が lato を使って書いていますので

その文字を指定します、同じ文字は一度指定すればそれでいいので ×は一回だけであとは省略をしています

(別に省略しなくても必要な分だけ機能します)

 

文字列は、URLエンコードしている必要があるので、スペースはそのまま使えません

スペースは文字じゃないので、わざわざURLエンコードして含める必要がないので、スペースが無いように詰めて書けば楽です

また文字は大文字、小文字も判別されます!

 

 

 

Lato 300 を全部読み込んだ時のファイルサイズ

25.2KB

 

Lato 300 で文字は 9ineBBWEB×DESIGNCREATIVE だけを読み込んだ時のファイルサイズ

4.2KB

 

ファイルサイズを6分の1に出来まいた

英字フォントには、英数字以外にも記号等も含まれるので思ったより 容量があります

 

日本語フォントなんかになると

余裕でMB単位になりますので、日本語のWEBフォントも こういった形で利用出来れば

フォントの重さに縛られること無く利用できそうですが

(無料で使える日本語のWEBフォントとかは聞いたことが無いですが)

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)