Changing My Code Font to Maple Mono NF CN

fonts
VSCode
diary
Author

Guest_1013

Published

2026-07-14

Intro

I’m always searching for an ideal code font that satisfies the following advantages:

  • open-source and free to use, even in commertial materials;

  • monospace for Chinese characters (2:1 width to normal English characters);

    • especially in VSCode (for some reason VSCode has a bug of not correctly monospacing with multiple fonts);

  • pleasing to look, at least for me.

Previously I used UbuntuMono Nerd Font, which, although seems to not have interior Chinese characters support, but works fine in all places I use. However, I’m not very satisfied beauty-wise.

After a bit of research, I finally choose Maple Mono; more specifically, a more traditional flavor, Maple Mono Normal, because personally I don’t really like too hand-writing fonts, as well as too much ligatures on English characters.

Advantages:

  • beautiful English characters;
  • ligatures;
  • internal Chinese character support.

Disadvantages:

  • might be too big in some cases;
  • the spacings between Chinese characters are rather big.
0x7F454C46
Hello, world! This is text.
云青青兮欲雨，水澹澹兮生烟。
-> ---> => >>> <= >= |> <|

Build & Download

This font has a lot of customizable tags during the building process. Luckily, the devs provide a normal preset, as well as a build system in the browser.

  1. Go to this showcase page, and find the custom build button, as is shown in Figure 1.
Figure 1: The custom build button.
  1. After the dependencies are properly set up (with logs outputting something like Loaded pyodide), choose the NF-CN type at the top, and click the build and download button on the bottom.
Figure 2: Build config page.
  1. Wait for the building process. According to the devs, a full build would typically require up to 1.2 GB of RAM; it took around 5 ~ 10 minutes on my laptop (i7-13700H, 32GB LPDDR5).

Changing the Default Font and Enabling Ligatures in VSCode

The font name is Maple Mono NF CN. To enable ligatures, search for ligature in user settings, which will give an option to edit in settings.json, as is shown in Figure 3; then change the option from false to true, as in:

"editor.fontLigatures": true,
Figure 3: Enabling ligatures in VSCode.