CCエクステンションアイコン

謎は全て解けた!BracketsでのAdobeエクステンションパネル開発中のフォントNOT_FOUND問題

っと、悩んでたんですが、Bracketsでエクステンションパネル開発していてCCアプリでデバック中に下記のようなコンソールがずっと毎回吐き出されてたんですよ(一部加工しております)。


「フォントが無い」とお怒りです

SourceSansProってなんだ?

「なんかフォントが足りないよ」みたいな感じなんですが、気持ち悪いので少し調べてみました。SourceSansPro-Regular.otfというフォント、Adobe社のフリーフォントらしくオープンソースで再配布も認められている。とってもフリーなフォントでした(参照サイト:窓の杜)。フォントのダウンロードはここからしました(再配布可能なんですけどね)。

CSS内で使用されている

どうも新規作成でエクステンションを作るとき、最初からある「topcoat-desktop-dark.min.css」の中でSourceSansProフォントの指定が行われているようです(下記イメージ参照)。それによってパネルを起動時にcssが呼び出されたタイミングでコンソールエラーが吐き出されてるみたいです。

フォント名を正規表現検索!

スポンサーリンク

どこにフォントファイルをコピーするの?

とりあえずOS自体にインストールしてみましたが、エラーは収まる気配を見せませんでした、、、。よくよくみると、cssで下記のように記述されおりますので、一つ上の階層に「font」フォルダを作成して、

font-family:"Source Sans";src:url(../font/SourceSansPro-Regular.otf)

「font」フォルダを新規作成

そこに必要なフォントファイル(SourceSansPro-Light.otf、SourceSansPro-Regular.otf、SourceSansPro-Semibold.otf)を配置。

3つのフォントファイルをコピー

すると、Brackets上でこのようになりますので、

フォントが追加された

これでデバッグしてみると、

エラーが消えた...

安心して下さい!エラーは静まり解決しました。これで皆さんも、気持ち良くエクステンション開発ができそうですね。

スポンサーリンク

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です