Comments (18)
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
from lotion.
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:
from lotion.
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.
from lotion.
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>
from lotion.
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!
from lotion.
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.
from lotion.
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:
from lotion.
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.
from lotion.
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.
from lotion.
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.
from lotion.
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. -.-
from lotion.
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
from lotion.
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
from lotion.
Unfortunately, I am not able to replicate this behavior.
Here is how I reproduced it now:
- Install Ubuntu 19.04 (in VM)
- Install Chrome
- 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 includesSegoe UI Symbol
which presence is the main issue here afaik. sudo fc-cache -fv
- Restart Chrome if running (all processes), or reboot
- Open https://www.notion.so/Engineering-Wiki-8ab8bb8e21144d0aaddf1444e1232b98 in Chrome
from lotion.
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)
from lotion.
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
from lotion.
Closing this issue as it is more or less fixed
from lotion.
Perfect! Thanks for letting us know
from lotion.
Related Issues (20)
- No "File" menu - no "New Window" option HOT 4
- Can't Login to the Lotion app HOT 11
- Is the lotion snap official? HOT 2
- It doesn't load HOT 2
- Install appears successful but gives error, app doesn't open HOT 3
- Fix native auto login from Google
- Can't change spellcheck language
- readme.md - recommendation out of date
- Cannot open with PopOS 21.10 beta HOT 3
- Can't hide menu bar HOT 1
- Can't uninstall from ./uninstall.sh HOT 1
- Indify widgets not working. HOT 1
- The interface dont show ... i have a black app screen HOT 1
- The interface does not open in Penguin Linux by Chrome Os HOT 1
- This app does not open on KDE Neon (based on Ubuntu 22.04 Jammy) HOT 2
- Log in doesn't work HOT 2
- [Debian 12 x64] lotion-web crashes with message "GPU process not usable" HOT 1
- [Ubtunu 22.04] Opens, but just keeps spinning, won't actually do anything HOT 4
- [Ubuntu 20.04] Time format
- Incompatible Browser HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lotion.