Google Analyticsで確認してみると、最近「Firebug font-family 文字化け」といったキーワードで訪問される方がチラホラといらっしゃる。
せっかく訪問してくれても、当ブログに探している答えは置いていないのだが、自分もかつて「？」と思った部分なので解決方法を書いてみる。
以下の画像は、FirebugでCSSファイルを参照した際に、font-familyが文字化けして表示された状態と正常な表示の場合との比較（クリックで拡大表示）。
簡単に言うと原因はFirebugではなく、CSSファイルの方にある。よくよく見れば、日本語記述の部分だけが文字化けしているのが判るだろう。
外部ファイル化したCSSは、HTMLファイルと文字コードを合わせることが望ましく、CSSファイルの一行目に以下のような文字コード指定を記述することが推奨されている（当然コメント部分は除いて記述します）。
/*utf-8の場合*/
@charset "utf-8";
/*shift_jisの場合*/
@charset "shift_jis";
/*euc-jpの場合*/
@charset "euc-jp";
次に、CSSファイルをテキストエディタ（メモ帳は不可。私の場合Terapadを利用）で開いて、先ほど1行目に記述した文字コードで保存する（Terapadで言えば、「ファイル」→「文字/改行コードを指定保存」）。
なお、Dreamweaverは何故かこういった作業に弱く、CSSファイルの文字コードを指定して保存するといったメニューは無い（私が知らないだけの可能性もあるが・・・）。
これで、CSSファイルををアップすれば、Firebugでの文字化けは解決する・・・のではないかと思う。
先に掲載した文字化けした状態のキャプチャ画像は、元々UTF-8で保存しているCSSファイルをSHIFT-JISで保存しなおして文字化けを再現した。
Firebugで文字化けするということはアドオン内の見てくれの問題ではなく、ブラウザの読み込みでも文字化けして認識しされているケースもあるということ。
font-familyの記述が何故か反映されないという場合、文字コードの不一致によりブラウザ側がfont-familyの日本語表記部分の指定を上手く解釈できていない可能性があります。