Letter spacing changed after updating 5.1.0 -> 5.5.0

[yury-s]

Details

• Browser and browser version: Chrome stable
• OS version: Mac, Ubuntu
• xterm.js version: 5.5.0

Steps to reproduce

1. Update xterm:

-        "xterm": "^5.1.0",
-        "xterm-addon-fit": "^0.7.0"
+        "@xterm/addon-fit": "^0.10.0",
+        "@xterm/xterm": "^5.5.0",

2. The letter spacing is messed up after the update:

Before:

After:

Can be reproduced with Playwright UI mode:

1. npm init playwright repro, press enter a few times to accept all defaults
2. cd repro
3. npx playwright test --ui, run the tests in UI mode and see the builtin terminal output.
4. Now update to a more recent version with updated xterm npm i @playwright/test@1.56.0-alpha-2025-09-23
5. npx playwright test --ui see the difference

Here is how the terminal is created: https://github.com/microsoft/playwright/blob/c813e9cf595cd4b83f6590afda26b460993231cb/packages/web/src/components/xtermWrapper.tsx#L63-L69

[jerch]

This looks like a font initialization issue to me. Plz make sure, that the font is fully loaded by the time the terminal gets instantiated. This is important, as xterm caches glyph metrics. also see https://github.com/xtermjs/xterm.js/blob/085a2750387f8c446b9443d2d0a9d7187e38db9b/addons/addon-web-fonts/README.md, which is part of #5178.

[yury-s]

Thanks for the suggestion. I tried to wait for the documents fonts to be ready but it didn't have any effect.

[jerch]

To rules out, that it is custom font related - can you try a system font once (setting it monospace should work, I think electron will resort to whatever it ships with as monospace). If thats not broken anymore like above, then awaiting document.fonts is not enough (you will get that behavior, if document.fonts does not hold all font files yet by the time you await it...)

Edit: There is another issue with simply awaiting document.fonts - if I recall correctly, it might not wait for all entries. You can work around that by doing:

await Promise.all(Array.from(document.fonts).map(ff => ff.load()));

which explicitly waits for all font files to be fully loaded.

[yury-s]

We ended up switching to 'monospace' with https://github.com/microsoft/playwright/pull/37540/files. The issue might have something to do with using var(--...) as the value.