Customizing Webfonts

[tsl0922]

Customizing Webfonts

[athrunsun]

@AGhost-7 @tsl0922
OK, I played with this around and I can be certain that we can't use CSS to control font in the terminal, since everything is now drawn into canvas elements in xterm.js.

However changing font attribute of canvas element on the fly doesn't have any effect either.

The correct way to do it is via the -t, --client-option option. I read source code to learn option keys then I started a terminal with:

ttyd -p 9090 -t fontSize=16 -t fontFamily="'IBM Plex Mono Medium', 'Noto Sans CJK SC'" fish

and it works perfectly.

[tsl0922]

ttyd bundles a inlined index.html to it's executable file, no other external dependencies, You can modify and build your own index.html and rebuild ttyd if you want, see the instructions.

I'd like to add an option for using an external index.html or html root for this, but no deadline, I'm a little busy recently, PRs are welcomed 😄

[AGhost-7]

That's is what I did - I forked the project for now but I feel this is more of a temporary solution.

I'm afraid that C is not something that I'm very good at.

[foxundermoon]

+1

[tsl0922]

Added the --index option for this (c9ffa8a).

Be aware that only external index.html file is supported, not html root.

[AGhost-7]

While I appreciate the feature which was added, its currently easier to just fork and use the gulp build in ttyd to customize the terminal instead of using the new --index option. If I use the --index option which was added I need to provide my own build script to generate the one html file.

What I am looking for is something closer to what you'd see in a regular terminal - more along the lines of being able to set terminal profiles.

[tsl0922]

I don't think recompile index.html is needed if you just want to change something like font-family, since your can add your own css block to override any existed class.

[athrunsun]

@tsl0922 Which element should we set font-family upon? Is it a canvas element?

[tsl0922]

Great! This feature wasn't well documented, there is similar issues I've answered before (like #122, #134).

You can get the full list of options here:

https://xtermjs.org/docs/api/terminal/interfaces/iterminaloptions/

[Zibri]

hmm no, tls0922: you should put an option for background/foreground color without the need to write a css or modify the index.html

[Zibri]

IMHO hterm is way better anyways... I use it extensively and is very easy to manage...

[tsl0922]

Hi, @Zibri you can custom the full color scheme with -t, --client-option. For example, to change the background/foreground:

ttyd -t 'theme={"foreground":"green","background":"cyan"}' bash

The code above only override the foreground/background color, you can get a full list of the predefined colors here.

[Zibri]

-t fontSize=16 -t fontFamily="'IBM Plex Mono Medium', 'Noto Sans CJK SC'"

I gave it another go today... and I still have a problem:
even though I used: --terminal-type xterm-256color
in linux I see the correct terminal type but there is no color.
why is that?
I tried both /bin/login both /bash -i -l

[metorm]

Folks, I had built a forked version that has embedded nerd font. You can also replace your font.

https://github.com/metorm/ttyd-nerd-font

https://www.weiran.ink/oss/ttyd-with-nerd-font.html