icons

[AlexP11223]

Why some icons are different from the web version? (worse)

For example the stars:

I thought this app is just a web browser opening notion.so, why does it need to replace the icons?

[puneetsl]

It tries to take the system fonts. I am guessing this can be fixed if you install any of the colored emojis and refresh font cache.
if you are using Ubuntu-based distro try the steps mentioned here https://askubuntu.com/questions/1130880/color-emojis-working-partially-on-18-04

[AlexP11223]

yeah, looks like it's because of that, but this solution doesn't seem to work for me, PopOS/Ubuntu 19.04 with Microsoft fonts installed. Also just noticed that I have the same issue in Chrome, the screenshot was from Firefox.

For some reason my Chrome always chooses Segoe UI Symbol according to DevTools :( Firefox used Segoe UI Emoji and changed to Noto after adding the file from the answer above.

[HymanZHAN]

I don't if this helps but on my machine (Fedora 30) Firefox makes use of the as shown below (notice the highlighted blue book icon):

My Chrome displays the same icon as the lotion app:

[AlexP11223]

One of the issues with my Chrome was that I didn't restart it properly, the process was still alive after closing it, so I killed it manually and it started working correctly here https://jsfiddle.net/s5om3r2e/ and here https://eosrei.github.io/emojione-color-font/full-demo.html but on notion.so (and lotion) it still for some reason chooses Segoe UI Symbol, maybe because of its CSS.

[AlexP11223]

Yeah, looks like it's indeed because of the CSS.

There is this on some top-level div:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";

If I delete "Segoe UI Symbol" here it works correctly (chooses the Noto emoji font), as well as if I add "noto color emoji" before Segoe UI Symbol. I wonder why Chrome does not choose Segoe UI Emoji like Firefox did when Noto was not configured.

[puneetsl]

There may be a chance that Chrome was using font cache from a different source. Usually, you can change the font priority using the font config file.
I am happy that you could figure it out the problem with your fonts.

[HymanZHAN]

I fixed my issue by installing the font JoyPixels from https://www.joypixels.com/ and changing the font-family by typing in the Notion app's console:

document.querySelector('div.notion-app-inner').style.fontFamily = '"Segoe UI", "JoyPixels"'

For Fedora (or maybe other distros) where Noto Color Emoji is installed by default, users can change "JoyPixels" to "Noto Color Emoji".

Also, on Firefox, the emoji font is Twemoji Mozilla, which cannot be displayed properly on Chrome on Linux:

Note that the resulting font will only be useful on systems that support layered color TrueType fonts; this includes Windows 8.1 and later, as well as Mozilla Firefox and other Gecko-based applications running on any platform.

Systems that do not support such color fonts will show blank glyphs if they try to use this font.

Some more details can be found here:

• https://github.com/mozilla/twemoji-colr
• https://www.colorfonts.wtf/

[AlexP11223]

changing the font-family by typing in the Notion app's console

it will disappear after restart. Is there any way to make it permanent? In normal Chrome you can use extensions like TamperMonkey or Stylus.

btw I sent the bug report to Notion, maybe they will add Noto to the list of fonts in the future.

For Fedora (or maybe other distros) where Noto Color Emoji is installed by default

Ubuntu too.

[HymanZHAN]

it will disappear after restart.

That's true, and I am not sure if @puneetsl can add a script to set the startup behavior of Notion(or Lotion), as it is created by nativefier. For some other "from-the-scratch" electron apps, like Inkdrop, you can put some script code in some js files to define the startup behavior.

What I do is just Ctrl+Shift+I, up arrow key and hit enter every time I restart the app. -.-

[puneetsl]

Unfortunately, I am not able to replicate this behavior.
I get good emojies, even after restart.

After testing one my 2 Linux laptops, it always came down to fixing system fonts and updating font cache.
The problem is every distro has different ways to do that and there is no one solution.

This problem is one of the most important hindrances for Notion folks to release a native Notion app for Linux.
I would refrain from injecting startup script to this app unless it is the last resort. The other way to solve this might be to install native Notion using these steps #1

[puneetsl]

Some sources that worked for me in the past:
https://victor.kropp.name/blog/emoji-on-linux/
https://github.com/theIYD/source-me/wiki/How-to-get-Colour-Emojis-on-Linux-platforms-%3F
https://www.omgubuntu.co.uk/2016/03/enable-color-emoji-linux-svg-font

[AlexP11223]

Unfortunately, I am not able to replicate this behavior.

Here is how I reproduced it now:

1. Install Ubuntu 19.04 (in VM)
2. Install Chrome
3. Install Microsoft fonts by copying them from Windows to /usr/share/fonts/win like suggested here https://pandasauce.org/post/linux-fonts/ (and in other sources as one of the options). There is an easier way: sudo apt install ttf-mscorefonts-installer, but it did not work for me now for some reason failing to download some fonts, I don't know whether this package includes Segoe UI Symbol which presence is the main issue here afaik.
4. sudo fc-cache -fv
5. Restart Chrome if running (all processes), or reboot
6. Open https://www.notion.so/Engineering-Wiki-8ab8bb8e21144d0aaddf1444e1232b98 in Chrome

[AlexP11223]

The workaround for me for now was to remove Segoe UI Symbol font from my system (seguisym.ttf file), after that it worked after creating the config for Noto Color Emoji as described in any of the tutorials above.

One strange thing is that without the config Chrome chooses Segoe UI Emoji, but it is the black & white version (in Firefox it is colored). I also tried to specify Segoe UI Emoji in the config but it still was not colored.

(I would prefer the colored Segoe UI Emoji because Noto looks weird in some places in Notion, such as the stars without outline on the gray background)

[puneetsl]

Found this in my notes somewhere to install emojis in Ubuntu.. it might work for some people:

wget https://noto-website.storage.googleapis.com/pkgs/NotoColorEmoji-unhinted.zip
sudo unzip NotoColorEmoji-unhinted.zip -d /usr/share/fonts/truetype/noto
sudo rm /usr/share/fonts/truetype/noto/LICENSE_OFL.txt
sudo rm /usr/share/fonts/truetype/ancient-scripts/Symbola_hint.ttf
sudo apt-get remove ttf-ancient-fonts-symbola
sudo chmod 644 /usr/share/fonts/truetype/noto/NotoColorEmoji.ttf
fc-cache -f -v
rm NotoColorEmoji-unhinted.zip

[HymanZHAN]

I don't know what changed but after I had made a fresh re-install of Fedora 31, this method actually worked: https://victor.kropp.name/blog/emoji-on-linux/

My .config/fontconfig/fonts.conf:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <alias>
    <family>serif</family>
    <prefer>
      <family>JoyPixels</family>
    </prefer>
  </alias>
  <alias>
    <family>sans-serif</family>
    <prefer>
      <family>JoyPixels</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>JoyPixels</family>
    </prefer>
  </alias>
</fontconfig>

[puneetsl]

Closing this issue as it is more or less fixed

[HymanZHAN]

Sorry for adding comments on a closed problem, but just a few minutes ago I found out that on Fedora 31 (Gnome), you could search and install Twemoji in the Gnome software store! It now works beautifully. The same good colorful icon as on Firefox!

[puneetsl]

Perfect! Thanks for letting us know