ITエンジニア/デザイナ向けにオープンソースを毎日紹介

最近人気のWeb Font。元々ブラウザは対応していたものの、ネットワーク経由でサイズの大きなフォントファイルの送信を控えていました。しかし最近はネットワークも高速化し、他のメディアも十分に大きくなってきたことで現実的になっています。

Googleが配布しているWeb Fontがありますが、そうしたWeb Fontをダウンロードしてくれるライブラリがwebfont-dlです。

webfont-dlの使い方

インストールはnpmで行います。

npm install -g webfont-dl

使い方はWeb FontのURLとスタイルシートを指定するだけです。

$ webfont-dl "http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500" -o css/font.css
 - eot: link
 - svg: link
 - ttf: link
 - woff1: data
 - woff2: omit
INFO  Downloading http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500 using svg user-agent ...
INFO  Downloading http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500 using woff user-agent ...
INFO  Downloading http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500 using ttf user-agent ...
INFO  Downloading http://fonts.googleapis.com/css?family=Crimson+Text:400,400italic|Raleway:500 using eot user-agent ...
INFO  Downloading 'Crimson Text'/normal/400 (embedded-opentype)...
INFO  Downloading 'Crimson Text'/normal/400 (woff)...
INFO  Downloading 'Crimson Text'/normal/400 (svg)...
INFO  Downloading 'Crimson Text'/normal/400 (truetype)...
INFO  Downloading 'Raleway'/normal/500 (embedded-opentype)...
INFO  Downloading 'Raleway'/normal/500 (woff)...
INFO  Downloading 'Raleway'/normal/500 (svg)...
INFO  Downloading 'Raleway'/normal/500 (truetype)...
INFO  Downloading 'Crimson Text'/italic/400 (woff)...
INFO  Downloading 'Crimson Text'/italic/400 (truetype)...
Done.

これでダウンロードが完了しました。

ダウンロードされた内容はこちらです。
ダウンロードされた内容はこちらです。

スタイルシートの中にはWeb Fontの内容がdata URIで展開されています。そのためフォントファイルを読み込まずとも動作しますし、data URIに対応していない場合はそれぞれ必要なファイルを読み込みます。

CDNのWeb Fontをオフラインでも使いたいといった場合や、独自で配信したい時に使える仕組みです。OpenType/WOFF/TrueType/SVGと各形式を取得してくれるのが便利です。

webfont-dlはnode/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

mmastrac/webfont-dl

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2