How to Customize Slack Fonts Using Stylus for Improved Readability

Introduction

I often use Slack and have been struggling with its default font, which I find hard to read and strains my eyes.

While using the Slack command (e.g., /slackfont helvetica) allows you to change the font freely, it reverts to the default at specific times, such as when the session expires. This issue is particularly inconvenient for me as I use the Slack browser ver, and the font reverts to default every time I restart it.

To solve this problem, I decided to use the Stylus extension.

Why/What is Stylus?

Stylus is a browser extension that allows you to apply custom CSS to any website.
https://add0n.com/stylus.html

By using this extension, I can ensure that my preferred font size and font style are always applied whenever I open Slack.

Initially, I tried to make the font setting persistent by executing the Slack command (e.g., /slackfont helvetica) periodically. However, Slack commands are designed to be executed manually by a human and cannot be run through API calls, bot postings, or Slack Workflows. When I tried this actually, the command was interpreted as plain text.
Ref: https://stackoverflow.com/questions/39829741/execute-slash-command-as-slack-bot

Setting

Stylus is available for Chrome, Firefox, and Opera. As a Chrome user, I downloaded it from the following URL: https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

After downloading, I launched the extension.

Create a new style by clicking on Write new style.

Now, let's create the style.

①Set a title for this style, e.g., app.slack.com

②Specify the target URL. As for me, to apply this to all Slack instances, use URLs starting with and specify the Slack URLs, https://app.slack.com/client.

③Define the CSS. The following code changes the default slack fonts to Verdana and sets the font size to 16px.

@font-face {
    font-family: "NotoSansJP";
    src: local("Verdana");
}

@font-face {
    font-family: "Slack-Lato";
    src: local("Verdana");
}

@font-face {
    font-family: "Slack-Fractions";
    src: local("Verdana");
}

@font-face {
    font-family: "appleLogo";
    src: local("Verdana");
}

@font-face {
    font-family: "sans-serif";
    src: local("Verdana");
}

* {
    font-size:16px;
}

Finally, click the Save button to save the changes (or use Command/Control + S).

Result

You can see your settings applying.

In the DevTools, you can see them.

Happy Coding!