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 Overflow

November 15, 2021
Category : News
Tags: css | javascript | monaco-editor | reactjs | visual-studio-monaco

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.