add INLINE_FONT build variable

[kevinhughes27]

Similar to the use case described in https://github.com/tsl0922/ttyd/issues/318 and https://github.com/tsl0922/ttyd/issues/31 I am using ttyd to share a tmux session for pair programming. I also use a custom nerdfont with icon glyphs which I want all clients to get automatically for a seamless pairing experience. Following the advice in those issues I've been building my own html file and using the --index option. However this still requires maintaining my own small fork of ttyd and I wanted to try and upstream something.

To cater to this use case I added an INLINE_FONT environment variable to the build allowing a user to pass the path to a font they want inlined in their html file. It works by injecting a css font-face rule if the variable is present. I use the font's file name as the font-family - I'll admit I don't have the deepest understanding of font names and css font-family so this may not be the most robust solution but it is working for me and the few fonts I tried.

With the css rule added I also need to update the webpack configuration to inline any fonts it encounters.

The final change required was an additional case to the terminal applyOptions function to load the font and resize the terminal after doing so. This ensures the font is properly applied for a brand new client.

The complete process for process for using ttyd with a custom font then becomes:

1. Build your own html using the INLINE_FONT environment variable
2. Use ttyd with the --index option passing your html file and --client-option fontFamily= with the font you inlined

If this PR is accepted then we could add this information to the wiki.

[kevinhughes27]

To elaborate on the css font-family comment it seems this value is not used by ttyd and xterm. Instead the actual font name from the font file is what you need to pass as the fontFamily to ttyd. I suspect this is because xterm.js uses the font directly more like a desktop application would way versus using the browser and css which makes sense. font-family is a required field for css font-face so I think the strategy of setting it as the font filename is pretty reasonable.

[kevinhughes27]

pushed a quick fix for prettier!

[moritzdietz]

I'm following this PR for quiet a while and love that you took a shot at implementing this functionality! Is there anything that needs to be done before this can get merged?

[kevinhughes27]

I rebased it to clear some conflicts that had built up. This time I left out the changes to src/html.h which is generated by running yarn build in the html directory. Running yarn build will result in a new html.h file now but perhaps that is done at release and shouldn't be on the PR.

@moritzdietz I'd love to get this merged in. I haven't heard anything from @tsl0922 - any thoughts on this addition?

[kevinhughes27]

@tsl0922 I changed to single quotes to fix the linting issue if you can re-approve the pipeline to run again

[kevinhughes27]

should have used yarn fix the first time instead of manually fixing. I did so this time and fixed the spacing

[tsl0922]

You can run yarn run fix to fix it.

[kevinhughes27]

Yep sorry that is what I meant to say I did in the last comment but I typed fmt on github for some reason. yarn fix has been run 🤞 for this build!

[tsl0922]

closing in favour of the wiki page:

https://github.com/tsl0922/ttyd/wiki/Serving-web-fonts

[kevinhughes27]

Thanks @tsl0922 I updated my pairing scripts to apply the patch instead :smile: It was really fun to learn how ttyd works and to iterate on exactly what was needed here. Also cool to see a number of things that were needed only a year ago not be necessary any more.