DEV Community

Cover image for How to Customize Slack Fonts Using Stylus for Improved Readability
Masayoshi Haruta
Masayoshi Haruta

Posted on

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.
open extention

Create a new style by clicking on Write new style.
create new style

Now, let's create the style.
Edit new 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;
}


Enter fullscreen mode Exit fullscreen mode

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

how to save

Result

You can see your settings applying.
result

In the DevTools, you can see them.
result as devtool

Happy Coding!

Top comments (0)