sorenisanerd / gotty

Share your terminal as a web application
MIT License
2.15k stars 138 forks source link

Can't set font size and family with xterm #37

Open flechaig opened 2 years ago

flechaig commented 2 years ago

What version of GoTTY are you using (gotty --version)?

1.4.0

What operating system and browser are you using?

Ubuntu 22.04 - Docker container

What did you do?

I tried everything to change the font sizez and family and can't get it to work. I managed to change the "messages" font size (the message "Connection Closed"), but not the terminal font size.

What did you expect to see?

I want to be able to set the font size and family in the config file.

What did you see instead?

The font size and family cannot be modified.

ulrichSchreiner commented 2 years ago

hi,

in 163fd0537cf9e0548ad7ffa8251c23aa7eb63979 the whole preferences struct was removed from the options, so on cannot set font-settings any more.

was this by intent @sorenisanerd ?

how to set font-family? the release notes from 1.4 say

Apply font size and family in xterm ([f157dbe](https://github.com/sorenisanerd/gotty/commit/f157dbe)), closes https://github.com/sorenisanerd/gotty/issues/21

well this could be right (parameters are transfered to xterm), but one cannot configure these settings any more in the gotty-conf file.

sorenisanerd commented 2 years ago

Gosh. This is embarassing.

Let me ponder it for bit and I'll come up with something.

kaventec commented 2 years ago

This is how ttyd exposes xterm.js parameters:

https://github.com/tsl0922/ttyd/wiki/Client-Options#advanced-usage

Configuration file may be nicer, but if it is too much work at this point - open-ended command line option is a good start.

P.S.: Was also using user_css quite a bit with hterm. With that you can add CSS links to web fonts, so whenever you login from and that system doesn't have your font locally - it won't matter because it would be loaded by the browser. Since all the static web resources are compiled in with gotty, it would be nice to have some kind of "include" for custom stylesheets.

flechaig commented 1 year ago

As a temporary workaround, I hard coded the font in the new Terminal() function: this.term = new Terminal({ fontFamily: 'MesloLGS NF, monospace', fontSize: 12, letterSpacing: 0 });

I had to leave the generic "monospace" font because of this bug: https://github.com/xtermjs/xterm.js/issues/2963#issuecomment-812031516

The basic way to use this is to install the new font on the host.

A most advanced way to use this is to create a custom index file (use the --index option), add a custom CSS file to the index file, and load the font as a web font, for instance: @font-face { font-family: 'MesloLGS NF'; src: local('MesloLGS NF'), local('MesloLGS-NF-Regular'), url('fonts/MesloLGS-NF-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } This needs hosting capabilites.

surajsharma commented 12 months ago

A most advanced way to use this is to create a custom index file (use the --index option), add a custom CSS file to the index file, and load the font as a web font, for instance: @font-face { font-family: 'MesloLGS NF'; src: local('MesloLGS NF'), local('MesloLGS-NF-Regular'), url('fonts/MesloLGS-NF-Regular.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } This needs hosting capabilites.

@flechaig has anyone tried this? with two separate fonts describing my xterm can one just add another @font-face directive to make it work for glyphs and such?

flechaig commented 9 months ago

I think it works but it may fail sometimes or be slow because the fonts must be downloaded each time you load GoTTY instead of using the local font files on the system.