神楽坂のシステムやさん通信

macOSのVSCodeで絵文字フォントをNoto Color Emojiに変更する方法

うぱるぱ tech
macOSのVSCodeで絵文字フォントをNoto Color Emojiに変更する方法

macOSのVSCodeで絵文字フォントをNoto Color Emojiに変更する方法

はじめに

VSCodeで表示される絵文字の見た目を変えたいと思ったことはありませんか？

macOSでは、絵文字はデフォルトで Apple Color Emoji が使用されます。Appleの絵文字デザインも素敵ですが、Googleの Noto Color Emoji のほうが好みという方もいるでしょう。

しかし、ネット上の情報では「macOSではNoto Color EmojiはVSCodeで使えない」という記述が多く見られます。

本記事では、macOSのVSCodeでNoto Color Emojiを使う方法を、実際に動作確認した手順でご紹介します。

結論

意外にもシンプルで、以下の2ステップだけです：

  1. Noto Color Emoji フォントをmacOSにインストール
  2. VSCodeの settings.json でフォント設定を変更

Custom CSSの拡張機能やシステムレベルのフォント設定変更は不要です。

手順

1. Noto Color Emoji のインストール

Homebrewを使ってインストールします：

brew install font-noto-color-emoji

2. VSCodeのフォント設定を変更

settings.json を開き、以下のように設定します：

エディタ部分：

"editor.fontFamily": "お好みのフォント, monospace, Noto Color Emoji"

ターミナル部分：

"terminal.integrated.fontFamily": "お好みのフォント, monospace, Noto Color Emoji"

設定後、VSCodeを再起動すれば完了です。

ポイント：シングルクォートを付けない

通常、スペースを含むフォント名はシングルクォートで囲みます（例：'Noto Color Emoji'）。しかし、今回の検証では シングルクォートを外した状態 で正しく動作しました。

クォートを付けた場合、macOSのシステムフォールバックにより Apple Color Emoji が優先されてしまう場合があります。クォートなしで指定することで、VSCode（Chromiumベース）のフォント解決が Noto Color Emoji を正しく認識するようです。

うまくいかないアプローチ

検証の過程で、以下のアプローチも試しましたが、こちらは不要でした：

Custom CSS拡張機能による上書き

vscode_custom_css.imports を使って @font-face で Apple Color Emoji を Noto Color Emoji に差し替えるアプローチも考えられます：

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

エディタ部分ではこの方法も機能しましたが、ターミナル部分は Canvas/WebGL で描画されるため CSS が効きません。結局、editor.fontFamily の設定だけで十分でした。

macOSのシステムレベルでのフォント変更

CoreTextのフォールバック設定を変更する方法もありますが、macOSアップデートで壊れるリスクがあり、他のアプリにも影響するためおすすめしません。

なぜこの方法がネット上で知られていないのか

VSCodeはElectron（Chromium）ベースのアプリケーションです。Chromiumのフォントフォールバック処理は、macOSのネイティブアプリとは異なる挙動をする場合があります。

多くの記事では「macOSではApple Color Emojiがシステムレベルで優先されるため変更できない」と説明されていますが、これはネイティブアプリでの話です。VSCodeのようなChromiumベースのアプリでは、font-family の指定がより直接的にフォント選択に反映されるため、この方法が機能すると考えられます。

動作確認環境

  • macOS: Darwin arm64 25.1.0（Apple Silicon）
  • VSCode: 1.109.4 (Universal)
  • Electron: 39.3.0
  • Chromium: 142.0.7444.265
  • Noto Color Emoji: Homebrew経由でインストール
  • リモートSSH接続環境でも動作確認済み

まとめ

macOSのVSCodeで絵文字フォントを変更するのは、思った以上に簡単でした。editor.fontFamily と terminal.integrated.fontFamily に Noto Color Emoji（クォートなし）を追加するだけです。

ネット上では「macOSでは不可能」という情報が多いですが、VSCodeがChromiumベースであることを活かせば、シンプルな設定変更で実現できます。

絵文字の雰囲気を変えたい方は、ぜひ試してみてください。

参考資料:

← 記事一覧に戻る