How to use two different fonts on a page with the monaco editor?
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.
Source: CSS – Stack OverflowNovember 15, 2021