Emoji support for Notion.so on Linux

Notion.so is a great tool for various tasks. I use it as a personal wiki but also for work-related notes.

Unfortunately there is no native support for Linux and even though this point has been mentioned quite often by the community, the Notion team did not provide a Linux Desktop App yet. Maybe it will never be shipped.

The Linux Desktop world can be evil when you have to make money selling applications. A lot of distributions with many different packaging standards and a small user base (compared to MacOS and Windows).

Luckily, Notion is built with electron and the Desktop app is just a wrapper around the Web app. Even though I have no clue about electron, I adapted some approaches from other people on the web and created a PKGBUILD for Arch Linux.

AUR Package available from r/NotionSo

While this works fine and I am happy to use Notion as a Desktop app rather than searching for the specific tab in my browser’s tab mess, things were not perfect yet.

One major point was the lack of emoji suppport. I cannot say whether this applies to Arch Linux only (or is even caused by my desktop environment (i3)). Let me know if you have native emoji support in Notion on GNOME/KDE.

One point of Notion is to have a visual appearing collection of your notes and this includes adding emoji here and there. Going through all the emoji content on Arch is a bit tedious and it took me quite some time to find a working setup.

Here is my solution:

  1. Install required fonts.
# pacman -S ttf-liberation noto-fonts noto-fonts-emoji
  1. Create a 75-noto-color-emoji.conf file in /etc/fonts/conf.avail/ with the following:^[Credit to https://www.reddit.com/r/archlinux/comments/9q8dlj/how_to_better_enable_color_emojis/]
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>

    <!-- Add generic family. -->
    <match target="pattern">
        <test qual="any" name="family"><string>emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <!-- This adds Noto Color Emoji as a final fallback font for the default font families. -->
    <match target="pattern">
        <test name="family"><string>sans</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test name="family"><string>serif</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test name="family"><string>sans-serif</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test name="family"><string>monospace</string></test>
        <edit name="family" mode="append"><string>Noto Color Emoji</string></edit>
    </match>

    <!-- Block Symbola from the list of fallback fonts. -->
    <selectfont>
        <rejectfont>
            <pattern>
                <patelt name="family">
                    <string>Symbola</string>
                </patelt>
            </pattern>
        </rejectfont>
    </selectfont>

    <!-- Use Noto Color Emoji when other popular fonts are being specifically requested. -->
    <match target="pattern">
        <test qual="any" name="family"><string>Apple Color Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Segoe UI Symbol</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Android Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Twitter Color Emoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Twemoji</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Twemoji Mozilla</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>TwemojiMozilla</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>EmojiTwo</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Emoji Two</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>EmojiSymbols</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

    <match target="pattern">
        <test qual="any" name="family"><string>Symbola</string></test>
        <edit name="family" mode="assign" binding="same"><string>Noto Color Emoji</string></edit>
    </match>

</fontconfig>
  1. Now enable above by issuing the following:
sudo ln -sf /etc/fonts/conf.avail/75-noto-color-emoji.conf /etc/fonts/conf.d/

Some notes about this:

If you omit to install ttf-liberation, all numbers will be shown as emojis which will make the approach unusable. For some reason, ttf-liberation is the Font that Notion as the sans-serif if it is available. However, you will also have emoji support due to noto-font-emoji. I tried other sans-serif fonts but could not get it working