Firefox の Stylish でできるオススメフォント設定

ついに Firefox アドインの Stylish に手を出した。サイト作成者が作ったスタイルを尊重はしたいものの、コチラのマシン環境のせいで見栄えや使い勝手が悪くなるのは避けたく、いくつかフォント設定をすることにした。

目次

必ず「游ゴシック Medium」が適用されるようにする

Windows において、「游ゴシック Light」と「游ゴシック Regular」が適用されると文字が細くて見づらいので、コレを避けるためのフォント指定を入れた。

/* Yu Gothic Medium */
@font-face { font-family: YuGothic            ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: YuGothic            ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック体"      ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "游ゴシック体"      ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "Yu Gothic"         ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "Yu Gothic"         ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック"        ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "游ゴシック"        ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "Yu Gothic Light"   ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "Yu Gothic Light"   ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック Light"  ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "游ゴシック Light"  ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "Yu Gothic Regular" ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "Yu Gothic Regular" ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック Regular"; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "游ゴシック Regular"; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "Yu Gothic Medium"  ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "Yu Gothic Medium"  ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }
@font-face { font-family: "游ゴシック Medium" ; src: local("Yu Gothic Medium"), local("游ゴシック Medium"); }
@font-face { font-family: "游ゴシック Medium" ; src: local("Yu Gothic Bold")  , local("游ゴシック Bold")  ; font-weight: bold; }

@font-face を利用して、通常 CSS で游ゴシックを指定するときのフォント名を上書きし、ウェイト未指定・Light・Regular の場合でも「游ゴシック Medium」が適用されるようにした。コレで細字に悩まされることがなくなる。

Chrome ブラウザだと、ブラウザデフォルトのフォントで「游ゴシック Medium」とウェイト付きで指定できるのだが、Firefox はできないのでこういう回避策…。

等幅フォントはオキニのヤツが使いたい

「はてなブログ」の編集画面などで、textarea 要素のフォントがセリフ体になっていてつらみがあったので、いっそのこと等幅フォントで表示させたい要素群は全部オキニの等幅フォントにしてやろうと思った。

/* Monospaced Font */
input[type="text"], textarea, pre, code, kbd, samp, var {
  font-family: MeiryoKe_Gothic, "Ricty Diminished", "Osaka－等幅", "Osaka-等幅", Osaka-mono, "ＭＳ ゴシック", "MS Gothic", "Courier New", Courier, Monaco, Menlo, Consolas, "Lucida Console", monospace !important;
}

個人的には MeiryoKe_Gothic さえ適用されれば良いのだが、フォールバックとして和英混在の等幅フォントをいくつか列挙しておいた。コレを等幅フォントで見せたい要素たちに適用しまくる。

コレで結構快適に使えるようになった。