DEV Community

upa_rupa
upa_rupa

Posted on

How to Change the Emoji Font to Noto Color Emoji in VS Code on macOS

#vscode #macos #font #emoji

How to Change the Emoji Font to Noto Color Emoji in VS Code on macOS

Introduction

Have you ever wanted to change the look of emojis displayed in VS Code?

On macOS, Apple Color Emoji is used by default for emoji rendering. While Apple's emoji designs are polished, some people prefer Google's Noto Color Emoji.

However, many online sources claim that "Noto Color Emoji doesn't work in VS Code on macOS."

In this article, we'll show you how to use Noto Color Emoji in VS Code on macOS, based on steps we tested and verified on macOS (Apple Silicon).

TL;DR

It's surprisingly simple — just two steps:

  1. Install the Noto Color Emoji font
  2. Update the font settings in VS Code's settings.json

No Custom CSS extensions or system-level font configuration changes are needed.

Steps

1. Install Noto Color Emoji

Install it using Homebrew:

brew install font-noto-color-emoji
Enter fullscreen mode Exit fullscreen mode

2. Update VS Code Font Settings

Open settings.json and configure as follows:

Editor:

"editor.fontFamily": "Your Font Name, monospace, Noto Color Emoji"
Enter fullscreen mode Exit fullscreen mode

Terminal:

"terminal.integrated.fontFamily": "Your Font Name, monospace, Noto Color Emoji"
Enter fullscreen mode Exit fullscreen mode

Restart VS Code after making these changes.

Key Point: Don't Use Single Quotes

Normally, font names containing spaces are often wrapped in single quotes (e.g., 'Noto Color Emoji'). However, in our testing, it worked correctly without single quotes.

When quotes are added, macOS's system font fallback may prioritize Apple Color Emoji. Omitting the quotes allows VS Code (which is Chromium-based) to correctly resolve and use Noto Color Emoji.

Approaches That Didn't Work

During testing, we also tried the following approaches, but they were ultimately unnecessary:

Overriding with Custom CSS Extension

You might consider using vscode_custom_css.imports to replace Apple Color Emoji with Noto Color Emoji via @font-face:

@font-face {
  font-family: 'Apple Color Emoji';
  src: local('Noto Color Emoji');
}
Enter fullscreen mode Exit fullscreen mode

While this worked for the editor area, it doesn't affect the terminal because the terminal renders via Canvas/WebGL, which means CSS overrides are not applied. In the end, the editor.fontFamily setting alone was sufficient.

System-Level Font Changes on macOS

Modifying CoreText's fallback settings is another option, but it risks breaking with macOS updates and affects all applications, so we don't recommend it.

Why This Method Isn't Well Known

VS Code is an Electron (Chromium)-based application. Chromium's font fallback handling can behave differently from macOS native applications.

Many articles explain that "Apple Color Emoji is prioritized at the system level on macOS, so it can't be changed." This is generally true for native macOS applications. However, in Chromium-based apps like VS Code, font-family specifications are more directly reflected in font selection, which is why this method works.

Test Environment

  • macOS: Darwin arm64 25.1.0 (Apple Silicon)
  • VS Code: 1.109.4 (Universal)
  • Electron: 39.3.0
  • Chromium: 142.0.7444.265
  • Noto Color Emoji: Installed via Homebrew
  • Also verified working over Remote SSH connections

Conclusion

Changing the emoji font in VS Code on macOS turned out to be much easier than expected. Simply add Noto Color Emoji (without quotes) to editor.fontFamily and terminal.integrated.fontFamily.

Despite widespread claims online that "it's not possible on macOS," by taking advantage of the fact that VS Code is Chromium-based makes it achievable with a simple settings change.

If you'd like to change the look of your emojis, give it a try!

This article was originally published in Japanese at archelon-inc.jp.

References:

Top comments (0)