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

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

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

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

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

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

これで読む込みは完了。

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

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

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