How to use two different fonts on a page with the monaco editor?

Question

I am using react-monaco-editor.

In the global css I set a font family, for example Helvetica, Tahoma, Arial, monospace.

At the same time I have an editor instance on my page that I want to use another font, like "Fira Code", monospace. I set it in the Editor's Optional. The editor shows this font.

But at this point there was a problem, the editor was using a global font when measuring the width of the font. So the error occurs when renderWhitespace and display indent indicator. I tried to use monaco.editor.remeasureFonts() in Hook or before rendering, but it didn't work.

I think it has something to do with selecting the font monaco uses for measurement, but I can't find how to specify the API for measurement.

Answer 1

Okay, I figured it out.

After reading the editor's source code I found that my global style was interfering with the temporary div width generated by the editor when determining the width.

Refer to this file: https://github.com/microsoft/vscode/blob/d8bc1fa0ff/src/vs/editor/browser/config/charWidthReader.ts

So I found a very stupid but usable solution: (The strange number 50000px is from that file)

*:not(div[style*='50000px']) {
  font-family: Helvetica, Tahoma, Arial, "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", "Fira Code", monospace;
}