Slack アプリのフォントを変更する方法

[2019.07.22 追記] Slack 4.0.0 以降、ファイルの配置と適用方法が変更になりました。以下の手順の実行には、Node.js と npx、asar というパッケージが必要です。 Node.js がインストールされている環境であれば npm i -g npx asar でインストールできます。

Slack を閉じる
%LocalAppData%\slack\app-x.y.z\resources\ ディレクトリに移動
sudo npx asar extract app.asar app.asar.unpacked コマンドでアプリケーションパッケージを展開
app.asar.unpacked\dist\ssb-interop.bundle.js というファイルを編集し、以下の内容を末尾に追加

document.addEventListener('DOMContentLoaded', function() {
        let s = document.createElement('style');
        s.type = 'text/css';
        s.innerHTML = '*{font-family:"Slack-Lato", "BIZ UDPGothic", appleLogo !important;}';
        document.head.appendChild(s);
});

sudo npx asar pack app.asar.unpacked app.asar コマンドでアプリケーションパッケージを作成し直し
Slack を起動

[2019.07.22 追記終わり]

Windows 10 の英語版を使っていると、Slack のアプリのフォントがいわゆる「中華フォント」状態になってしまいます。 Slack アプリの設定にはフォントを変更する機能は無いようなのですが、Slack アプリは Electron 製ということで CSS を無理やり適用することができるようです。

%LocalAppData%\slack\app-x.y.z\resources\app.asar.unpacked\src\static\ssb-interop.js を編集して、末尾に以下のような内容を追加します。

onload = function() {
        $("<style></style>").appendTo("head").html("*{font-family:'Slack-Lato', 'BIZ UDPGothic', appleLogo !important;}")
};

Slack-Lato は Slack の標準のフォントです。英数字などは標準のままのほうが違和感が少ないため、Slack-Lato をまず指定します。

次に指定しているのは、日本語表示用のフォントです。Windows に最初から入っていたフォントをいろいろ試してみて一番しっくり来たものを指定しました。

アプリではなくブラウザで Slack にアクセスした場合のフォント設定は font-family: NotoSansJP,Slack-Lato,appleLogo,sans-serif; となっているようですので、こちらに従ってみるのも良いかもしれません。

Slack のアプリのバージョンが上がるとデフォルトに戻ってしまいそうなので、自分用のメモでした。