twitterやgithubのwebfont文字化け対策

終わらないフォントとの戦い

windows使ってるとフォントの汚さとの戦いは死活問題となる。 そこで多くの人はmactypeを入れたりフォントを置き換えたりしているだろう。 しかし、githubtwitterで利用されるwebfontで文字化けが発生する。(あとこのブログも文字化けする)

f:id:akameco:20141206205403p:plain

これをどうにかしようとググると、"firefoxのオプション→コンテンツ→詳細設定→Webページが指定したフォントを優先する"をONにすればよいと出るが、これでは全てのページで指定されたフォントで表示されてしまう。

about:configと向き合う

このオプションをwebfontを利用してるサイトごとに無効にしようと考えた。about.configの設定を見てみるとbrowser.display.use_document_fontsの値を設定すればいいっぽい。 ただ、いちいちサイトごとに指定するのは、めんどくさそうだ。もっと汎用的な解決方法がいい。

次の手段として、Stylishで気に入らないフォントを強制的に変更することにするした。

Stylishでサイトを俺色に染め上げる

css3のオプションにはfont-faceがある。

font-faceを利用すれば、local()構文で自分で指定したフォントに変えることができる。 また、自分で指定するフォントがなければfirefoxのオプションで規定のフォントしたフォントが読み込まれる。 したがって、一度設定してしまえば、いちいちユーザースタイルを弄らなくても、firefoxのオプションを変更するだけでフォントを変更することが可能になる。

ユーザースタイルを設定

Webページが指定したフォントを優先するをfirefoxのオプションで指定する。そして、Stylishの新しいスタイルを書くから以下を貼り付け。もっと広範囲にフォントを変更したければ適宜追加すればいい。

この設定でgoogle検索を見た場合(mactypeを入れたwindows)

f:id:akameco:20141206204607p:plain

いいかんじ。使ってるフォントはこれ

もちろんtwittergithubの文字化けしていない。

f:id:akameco:20141206205421p:plain