Fonts being displayed incorrectly

[creeper451]

When I launch ttyd from the browser in a new tab the fonts gets displayed incorrectly the first time, in order to fix it, you would have to refresh the page every time you launch it in a new tab.

I complied ttyd from source and I added the Caskaydia Cove Nerd Font using the instructions described in the Wiki, and then started the ttyd binary using the following parameters:
'-p 6175 -W -t fontSize=15 -t enableSixel=true -t enableZmodem=true -t "fontFamily=My Font" login'

Screenshots:

Environment:

• OS: [e.g. Windows 10 Version 1809]
• Browser: [e.g. Brave 1.62.165 Chromium: 121.0.6167.184]

log of ttyd:
log.txt

[tsl0922]

Maybe because the font was not loaded at the first time. It's required to call fitAddon.fit() after font change:

ttyd/html/src/components/terminal/xterm/index.ts

Line 449 in 89fb69b

if (key.indexOf('font') === 0) fitAddon.fit();

[creeper451]

Sorry for my late reply, I checked this line on my machine and its there so... I don't understand what you are trying to say, I named the custom font that I added to the source code "MyFont" should I add it to the end of this line or what?

[IZSkiSurfer]

Hi folks, I stumbled across the same bug.

I use an inlined nerd font (as described in the wiki) and pass the following arguments to ttyd --client-option fontFamily="MesloLGS_NG" --client-option fontSize=13.3.
So I don't "change" the font (later).

It looks like the fit() / resize() functions compare the rows and cols and behave different when values are the same as before or different. Also somehow the CharSizeService of xterm.js is taken into account. I can't dig deeper into it but for the moment I fixed it this way:

ttyd/html/src/components/terminal/xterm/index.ts

                default:
                    console.log(`[ttyd] option: ${key}=${JSON.stringify(value)}`);
                    if (terminal.options[key] instanceof Object) {
                        terminal.options[key] = Object.assign({}, terminal.options[key], value);
                    } else {
                        terminal.options[key] = value;
                    }
                    if (key.indexOf('font') === 0) {
+                       setTimeout(() => {
+                           terminal.resize(Math.max(0, terminal.cols - 1), terminal.rows);
+                       }, 100);
                        fitAddon.fit();
                    }
                    break;

Then the usual yarn build and make.

A very dirty hack but at least it works...
I guess the font not yet loaded at that stage and in turn the cols/rows and/or CharSize is calculated wrong.
Maybe it's not even a ttyd bug but a xterm.js bug - dunno.
If someone has a cleaner solution - I can test it.

[89iuv]

This has been driving me crazy.
A stable workaround is to hardcode the font when creating the terminal.

After:

ttyd/html/src/components/terminal/xterm/index.ts

Line 151 in 89fb69b

this.terminal = new Terminal(this.options.termOptions);

Add:

this.terminal.options.fontFamily = 'My Font';