Terminal font letter spacing is huge on Arch Linux (not on Windows or Ubuntu)

Details

I’ve only tested this on Windows 10, Ubuntu, and Arch Linux, but I’ve only had the problem on Arch, in Chrome, Konqueror, Vivaldi, and GNOME Web. Essentially, the each character in the terminal is its normal width, but the space around it is doubled, so each character takes up the space of two. Here’s some images from Cockpit on Chrome, and some more from xtermjs.org, also on Chrome. And as I said, on Windows it’s not an issue.

• Browser and browser version: Chrome 81.0.4044.138 (Official Build) (64-bit), Konqueror 4.0.97, Vivaldi 3.0.1874.38 (Stable channel) (64-bit), and GNOME Web 3.36.2
• OS version: Arch Linux (last pacman -Syu was a day ago)
• xterm.js version: 4.6.0 within the Cockpit terminal on Fedora Server 32, and even on the xtermjs.org website (!).

Steps to reproduce

1. Open any of the browsers listed (and I don’t think it’s limited to just those, but curiously it’s not an issue in VS Code…) on Arch Linux.
2. Look at an xterm.js terminal and observe the extremely wide letter spacing.

[Tyriar]

Here’s an addon that waits for fonts to load and then opens: https://github.com/CoderPad/xterm-webfont

[Kevin-Parkin]

Daniel, I finally understand the wisdom in your comment.

xterm.js creates a <span> element (xterm-char-measure-element) containing the letter “W” and measures its width using getBoundingClientRect() to determine the character width. However, if the webfont is not loaded before this, getBoundingClientRect returns an overly conservative width instead. Even if there is an @font-face in the style sheet, the browser does not load the font until it is used.

xterm-webfont uses fontfaceobserver to solve the font loading problem and generate an event when the font is loaded. Unfortunately, I never could get xterm-webfont to work because my project cannot use javascript modules. The workaround was simply to use fontfaceobserver directly.

So now I have the following in my html webpage, which gives me a single-spaced webfont:

<style>
        @font-face {
            font-family: EIEFont;
            src: url(EIE.ttf);
        }
</style>
<script src="node_modules/xterm/lib/xterm.js"></script>
<script src="node_modules/fontfaceobserver/fontfaceobserver.js"></script>    
<script src="node_modules/xterm-addon-fit/lib/xterm-addon-fit.js"></script>
<script src="node_modules/xterm-addon-attach/lib/xterm-addon-attach.js"></script>
...
<script>
        var regular = new FontFaceObserver('EIEFont').load();
        var bold = new FontFaceObserver('EIEFont', {
            weight: "bold"
        }).load();
        Promise.all([regular, bold]).then(() => {
            const term = new Terminal({
                fontFamily: 'EIEFont',
                fontSize: 16, 
                theme: {
                    blue: '#0000ff'
                },
                cursorBlink: true,
                convertEol: true
            });
            const fitAddon = new FitAddon.FitAddon();
            term.loadAddon(fitAddon);
            term.open(document.getElementById('terminal'));
            fitAddon.fit();
            term.focus();

            and so on...
</script>

Hopefully this helps someone in future.