MarkdownエディタTyporaの日本語フォントがWindowsではダサダサであるのをなんとかする


Typoraはシンプルでとても使い勝手のよいMarkdownエディタで、現状では無料で利用できます。私は最近これにハマっています。

漢字の表示問題

とても気に入っているのですが、Windows環境で日本語を使用すると、表示フォントの漢字部分がダサダサになるという問題があります。これはひょっとしたら私の環境だけに依存した問題かもしれません。一体どのフォントが使用されているのかも分かっていません。

フォントのカスタマイズの公式情報

以下に、公式のカスタマイズ方法のガイドを見つけました。但しこの方法でbase.user.cssthemeフォルダに置いて、bodyfont-familyを一括指定する場合、元々のthemeで指定してあったフォント指定を上書きしてしまい、せっかく美しい欧文フォントの指定まで影響を受けます。ここは、下記のようにテーマ毎に対応するべきです。

Custom Font http://support.typora.io/Custom-Font/

Add Custom CSS http://support.typora.io/Add-Custom-CSS/

解決策

個別のテーマ毎に、カスタマイズ用のCSSを準備することができます。

Preference > Advanced Settings > Open Theme Folder で次のフォルダが開きます。

C:\Users\<username>\AppData\Roaming\Typora\themes

個別のtheme毎に(例えばgithub.css)、bodyfont-family属性を調べた上で、それを元に日本語フォント指定を追加した、以下のようなCSSを準備して、github.user.cssと命名して、上記のフォルダに置くと、設定が反映されます。

CSSの実例

github.user.css

body {
    font-family: "Open Sans","Clear Sans","Helvetica Neue",Helvetica,Arial,sans-serif,"Hiragino Kaku Gothic ProN","MS PGothic";
}

newsprint.user.css

body {
    font-family: "PT Serif", 'Times New Roman', Times,"Hiragino Mincho ProN","MS PMincho";
}

night.user.css

html,
body,
button,
input,
select,
textarea {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif,"Hiragino Kaku Gothic ProN","MS PGothic";
}

pixyll.user.css

body {
    font-family: "Merriweather", "PT Serif", Georgia, "Times New Roman", "STSong", Serif,"Hiragino Mincho ProN","MS PMincho";
}

white.user.css

body {
    font-family: "Vollkorn", Palatino, Times,"Hiragino Mincho ProN","MS PMincho";
}