解 説

Web Fontを使ったら気に入ったものがあったので、Illustratorでも使用したい、けれどもどうしたらいいのか?などと質問が出たりします。
その場合にはWeb Fontをダウンロードする必要があります。
*Web Fontを使用するときはライセンスによる指示に従う必要がありますので、その内容を十分確認をしてください。
licens

Google Fontsは英語ですが、フリーで使用できるもっとも有名なWeb Fontのひとつです。
Google Fontsをダウンロードする方法は、「Google Fontsをダウンロードしてデスクトップで使う」で説明されていますので参照してください。

webfont-dlはGoogleなどが配布しているWeb Fontをダウンロードしてくれるライブラリです。
ただダウンロードするだけなら上のやり方で良いのですが、OpenType/WOFF/TrueType/SVGと各形式で取得してくれたり、font.cssを作成してくれるのが特徴です。

今回はwebfont-dlを使い、Google FontsのデータをダウンロードしてMacのFont Bookにインストールする例を説明します。

webfont-dlのインストール(Mac用)

Node.js環境の確認とインストール

インストールはnpmで行いますので、ターミナルを使用します。
npmを使用するにはNode.jsをインストールしておく必要があります。

Node.jsはGruntでも必要なため、すでに導入している場合もあると思います。
また、rpmはNode.jsをインストールした際に一緒にインストールされていると思います。
それぞれ、インストールされているか確認するコマンドは次のとおりです。

Node.jsの確認
[text]
node -v
[/text]

npmの確認
[text]
npm -v
[/text]

それぞれバージョンが表示されればインストールされています。

Node.jsがインストールされていなければNode.jsのサイトでダウンロードしてからインストールします。
webfont1
Node.jsのインストールはこちらを参照

webfont-dlのインストール

ターミナルでrootになり、次のコマンドを入力します。
[text]
npm install -g webfont-dl
[/text]
これでインストールは終了です。

ターミナルでrootになる方法

rootのパスワード設定
[text]
sudo passwd root
[/text]
rootになるには
[text]
su –
[/text]

Web Fontのダウンロード

Web Fontのダウンロードもターミナルで行います。こちらはユーザー権限で大丈夫です。
webfont-dlの後にGoogle Fontsで表示される「Add this code to your website:」のアドレス部分を入れます。
webfont2
[text]
webfont-dl "http://fonts.googleapis.com/css?family=Audiowide" -o mycss/font.css
[/text]
webfont3
最後の「mycss/font.css」の「mycss」がホームディレクトリに用意したフォルダ名です。
この中にダウンロードしたフォントのデータが入ります。
ダウンロードしたデータの中の拡張子がttfのものを右クリックして「このアプリケーションで開く」から「FontBook」を選ぶとMacにインストールされます。

これで、ダウンロードしたフォントのデータをillustratorやPhotoshopで使用できるようになります。

参考サイト:MOON GIFT