AdobeのEdge Codeの元である「Brackets」がバージョンアップしてたので、ついでに拡張機能を突っ込んでみることにしました。こちらに公開されている拡張機能の一覧があります。

ほうほうあるね、あるね。

Adobe Edge Web Fontsを試してみる

その一覧の中に「Edge Web Fonts」なんてのがあったので、ちょいと入れてみることに。

この公開されている拡張機能たちのインストール詳細はそれぞれのREADMEを読んでいただくとして、基本「~/Library/Application Support/Brackets/extensions/user/」の中に置いてあげれば良さそうです（Windowsの人は知りませんｗ）。そこのZipをダウンロードして解凍してもいいですけど、Gitを使ってる方は

git clone git://github.com/adobe/brackets-edge-web-fonts.git

とかでまぁ適当に。念のため、Bracketsを再起動すると、右上の方に「W」みたいなのがでてきますので、それをクリックすると説明が読めます。

CSSのどこか任意の場所で「font-family:」と入力すると補完が出てきて「Browse Web Fonts」の選択肢があるので、それを選ぶとこんなウィンドウが開きます。

使いたいフォントを選んだら「Done」をクリック。先程の「W」を一度クリックすると、JSのコードを教えてくれるので、今度はそれをHTMLにペーストしましょう。

head要素の中に貼り付けたらおしまいです。

Live Previewで確認すると、指定したWeb Fontsになってるのでオッケー。簡単ですね。

中には要Node.jsな拡張機能も

やはり時代は「Node.js」なんですねぇ。拡張機能の中には「Extension Manager」みたいな便利そうなのもあるんですが、残念ながらこれをインストールするにはあらかじめNode.jsを入れておかないといけません。そして、いわゆる黒い画面からもろもろ必要なパッケージをインストールする必要があります（npm installするだけだけど）。

いい加減あきらめて黒い画面ですよ、Webデザイナーの皆さんも。