Web Fontを使ったら気に入ったものがあったので、Illustratorでも使用したい、けれどもどうしたらいいのか？などと質問が出たりします。
その場合にはWeb Fontをダウンロードする必要があります。
＊Web Fontを使用するときはライセンスによる指示に従う必要がありますので、その内容を十分確認をしてください。
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の確認
node -v
npmの確認
npm -v
それぞれバージョンが表示されればインストールされています。
Node.jsがインストールされていなければNode.jsのサイトでダウンロードしてからインストールします。
＊Node.jsのインストールはこちらを参照
webfont-dlのインストール
ターミナルでrootになり、次のコマンドを入力します。
npm install -g webfont-dl
これでインストールは終了です。
ターミナルでrootになる方法
rootのパスワード設定
sudo passwd root
rootになるには
su -
Web Fontのダウンロード
Web Fontのダウンロードもターミナルで行います。こちらはユーザー権限で大丈夫です。
webfont-dlの後にGoogle Fontsで表示される「Add this code to your website:」のアドレス部分を入れます。
webfont-dl "http://fonts.googleapis.com/css?family=Audiowide" -o mycss/font.css
最後の「mycss/font.css」の「mycss」がホームディレクトリに用意したフォルダ名です。
この中にダウンロードしたフォントのデータが入ります。
ダウンロードしたデータの中の拡張子がttfのものを右クリックして「このアプリケーションで開く」から「FontBook」を選ぶとMacにインストールされます。
これで、ダウンロードしたフォントのデータをillustratorやPhotoshopで使用できるようになります。
参考サイト：MOON GIFT
コメントを投稿するにはログインしてください。