Mattermostで日本語フォントのスタイルを変更する方法

SlackのクローンOSSの《Mattermost》で、スタイルシートを変更して日本語フォントを綺麗に表示させる方法をメモ的に残しておきたいと思います。

流れとしては、カスタムCSSファイルを作成し、それを読み込む方法となります。但し注意点として !important 句を利用し、強制的に既存のスタイルを上書きさせます。

HTMLを修正してCSSファイルを読み込む

まずはCSSファイルを読み込ませる為にHTMLを修正します。修正するファイルは root.html です。尚、パスはバージョンによって少し異なるようですが、今回は 4.9.2 を参考に記載しています。

$ cd /opt/mattermost/client
$ cp -p root.html root.html.backup
$ vim root.html

head句を閉じる前に、CSSファイルの読む込みを記載します。

</head>
↓
<link rel=”stylesheet” href=”/static/custom.css” type=”text/css” /></head>

これで読む込みは完了。

カスタムCSSファイルを作成する

最後にカスタムCSSファイルを作成します。

$ vim /opt/mattermost/client/custom.css

参考として下記のようなスタイルを指定します。
ちなみに !important を記載することでJSなどで指定されたスタイルを無視し、強制的にスタイルの適用を指定することになります。

body {
        font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif !important;
}

これで完了です。
あとはMattermostの画面をブラウザで再読込させればスタイルが変更されているはずです。（キャッシュにご注意を。。。）