webfont-dl - Web Fontのダウンローダー
最近人気の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のオープンソース・ソフトウェアです。