[Bug] Cursor becomes misaligned when using custom font

Reproducible in vscode.dev or in VS Code Desktop?

[X] Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

[ ] Not reproducible in the monaco editor playground

Monaco Editor Playground Link

Monaco Editor Playground Code

JS:

require.config({ paths: { 'vs': 'monaco-editor/min/vs' } });

require(['vs/editor/editor.main'], function () {
    const editor = monaco.editor.create(document.getElementById('editor'), {
        value: '<!DOCTYPE html>\n<html lang="en">\n<head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>Document</title>\n</head>\n<body>\n    <h1>Hello, Monaco Editor!</h1>\n</body>\n</html>',
        language: 'html',
        theme: 'vs-dark',
        automaticLayout: true,
        fontFamily: 'Laurentia Code',
    });

    const preview = document.getElementById('preview');

    editor.onDidChangeModelContent(() => {
        const html = editor.getValue();
        preview.srcdoc = html;
    });
});

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodePen-like Editor</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="container">
        <div id="editor"></div>
        <iframe id="preview" sandbox="allow-scripts"></iframe>
    </div>
    <script src="monaco-editor/min/vs/loader.js"></script>
    <script src="script.js"></script>
</body>
</html>

CSS:

@font-face {
    font-family: 'Laurentia Code';
    src: url(https://andorraeditor.pages.dev/DejaVuSansMono.ttf);
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
}

#container {
    display: flex;
    height: 100%;
    width: 100%;
}

#editor {
    width: 50%;
    height: 100%;
}

#preview {
    width: 50%;
    height: 100%;
    border: none;
}

Reproduction Steps

We were loading a custom font a code editor we wanted to create. When we entered the URL and changed the font in the CSS file, the cursor would be gradually misplaced in the Monaco editor, both in the playground and on our website.

Actual (Problematic) Behavior

When the custom font gets loaded, as the user moves right in a line (or farther away from the left size of the editor) their cursor would start to become misaligned. It is the worst on desktop (Win11) but also happens a bit on mobile. We have tried a few other fonts and the text cursor still does the same thing.

Expected Behavior

The cursor should stay aligned with the text, no matter what font.

Additional Context

No response

microsoft / monaco-editor