Software & AppsOperating SystemLinux

Why Aren’t Color Emojis Showing Up in Chrome and Firefox on Ubuntu 18.04?

Ubuntu 14

If you’re using Ubuntu 18.04 and have noticed that color emojis are not displaying correctly in Chrome and Firefox, you’re not alone. This is a common issue faced by many Ubuntu users. In this article, we will explore why this happens and provide detailed solutions to fix this issue.

Quick Answer

Color emojis may not be showing up in Chrome and Firefox on Ubuntu 18.04 due to the default grayscale emoji font used by the system. To fix this issue, you can uninstall and reinstall the fonts-noto-color-emoji package, copy the font into the /usr/local/share/fonts directory, create a font configuration file, or install emoji-related extensions.

Understanding the Issue

The root of the problem lies in how different browsers handle emojis. Some browsers, like Chrome and Firefox, use the system’s emoji font to display emojis. However, Ubuntu 18.04, by default, uses a grayscale emoji font, which is why emojis do not appear in color in these browsers.

How to Fix the Issue

There are several methods to fix this issue. We will cover them in detail below.

Method 1: Uninstall and Reinstall the Font Pack

The first method involves uninstalling and reinstalling the fonts-noto-color-emoji package. This package contains the colored version of Google’s Noto Emoji font. Here’s how to do it:

  1. Open the terminal. You can do this by pressing Ctrl + Alt + T.
  2. Run the following command to uninstall the font package:
    sudo apt remove fonts-noto-color-emoji
    The sudo command allows you to run commands with administrative privileges. The apt remove command removes the specified package.
  3. Next, reinstall the font package by running:
    sudo apt install fonts-noto-color-emoji
    The apt install command installs the specified package.
  4. Restart Chrome and Firefox to see if the issue has been resolved.

Method 2: Copy the Font into /usr/local/share/fonts

Another method is to copy the font into the /usr/local/share/fonts directory. Here’s how:

  1. Open the terminal.
  2. Run the following command:
    sudo cp -r /usr/share/fonts/truetype/noto /usr/local/share/fonts/truetype/noto
    The cp command copies files and directories. The -r option tells it to copy directories recursively.
  3. Restart your browsers and check if the emojis are now displaying in color.

Method 3: Create a Font Configuration File

If the above methods do not work, you can create a font configuration file that instructs the system to prefer the color emoji font. Here’s how:

  1. Open a text editor and create a new file named 01-emoji.conf.
  2. Paste the following content into the file:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE fontconfig SYSTEM "fonts.dtd">
    <fontconfig>
     <alias>
     <family>serif</family>
     <prefer>
     <family>Noto Color Emoji</family>
     </prefer>
     </alias>
     <alias>
     <family>sans-serif</family>
     <prefer>
     <family>Noto Color Emoji</family>
     </prefer>
     </alias>
     <alias>
     <family>monospace</family>
     <prefer>
     <family>Noto Color Emoji</family>
     </prefer>
     </alias>
    </fontconfig>
    This configuration tells the system to prefer the Noto Color Emoji font when rendering serif, sans-serif, and monospace fonts.
  3. Save the file and move it to the ~/.config/fontconfig/conf.d/ directory by running the following command in the terminal:
    mv 01-emoji.conf ~/.config/fontconfig/conf.d/
    The mv command moves files.
  4. Rebuild the font cache by running:
    fc-cache -f -v
    The fc-cache command builds font information cache files. The -f option forces the rebuild, and the -v option enables verbose output.
  5. Restart your browsers and check if the issue has been resolved.

Method 4: Install Emoji-Related Extensions

If none of the above methods work, you can try installing emoji-related extensions. For Chrome, you can try the “Emojis – Emoji Keyboard” or “Chromoji – Emojis for Google Chrome” extensions.

Conclusion

In this article, we’ve covered why color emojis might not be showing up in Chrome and Firefox on Ubuntu 18.04 and provided detailed solutions to fix this issue. We hope this article helps you enjoy a more colorful browsing experience on Ubuntu. If you still face issues, it might be worth checking for any underlying system conflicts or contacting Ubuntu support for further assistance.

Why are color emojis not displaying correctly in Chrome and Firefox on Ubuntu 18.04?

Color emojis are not displaying correctly because Ubuntu 18.04, by default, uses a grayscale emoji font, while Chrome and Firefox rely on the system’s emoji font to display emojis in color.

How can I fix the issue of color emojis not showing up in Chrome and Firefox?

There are several methods to fix this issue. You can try uninstalling and reinstalling the fonts-noto-color-emoji package, copying the font into the /usr/local/share/fonts directory, creating a font configuration file, or installing emoji-related extensions.

How do I uninstall and reinstall the `fonts-noto-color-emoji` package?

To uninstall the font package, open the terminal and run sudo apt remove fonts-noto-color-emoji. To reinstall the font package, run sudo apt install fonts-noto-color-emoji. Restart Chrome and Firefox to see if the issue is resolved.

How do I copy the font into the `/usr/local/share/fonts` directory?

Open the terminal and run sudo cp -r /usr/share/fonts/truetype/noto /usr/local/share/fonts/truetype/noto. This command will copy the font into the specified directory. Restart your browsers to check if the emojis are displaying in color.

How do I create a font configuration file?

Open a text editor and create a new file named 01-emoji.conf. Paste the provided configuration content into the file. Save it and move it to the ~/.config/fontconfig/conf.d/ directory by running mv 01-emoji.conf ~/.config/fontconfig/conf.d/ in the terminal. Rebuild the font cache with fc-cache -f -v. Restart your browsers to see if the issue is resolved.

What should I do if the above methods don’t work?

If the above methods don’t work, you can try installing emoji-related extensions. For Chrome, you can try the "Emojis – Emoji Keyboard" or "Chromoji – Emojis for Google Chrome" extensions.

Where can I find the “Emojis – Emoji Keyboard” extension?

You can find the "Emojis – Emoji Keyboard" extension for Chrome on the Chrome Web Store.

Where can I find the “Chromoji – Emojis for Google Chrome” extension?

You can find the "Chromoji – Emojis for Google Chrome" extension for Chrome on the Chrome Web Store.

Leave a Comment

Your email address will not be published. Required fields are marked *