Feature: Add custom font support.

[pozgo]

Lots of us are using zsh and powerlevel10k + MesloLGS NF or other custom fonts so the terminal looks nice.

Please add an option in the configuration to specify the font which will be used when rendering.

So far I'm using terminalizer which gives me that option but I would love to move back to asciinema but lack of this feature is a deal breaker ATM

Link to terminalizer

[m-graf]

Feel free to open a pull request 🙂

[ku1ik]

Somewhat related: https://github.com/asciinema/asciinema-player/issues/140

[mrwormhole]

is it so hard to add MesloGS NF support for asciinema server? I see so many issues are raised, yet there is no elixir guru who can spend time on this

[xsebek]

@sickill since it is possible to use custom fonts in JavaScript, how hard would it be to use that feature in the server?

I am not a web dev, but from the discussion and this tutorial (link), it looks like the asciinema website would have to bundle one nerd font and allow setting that in the player.

For example, if the MesloGS NF font proposed by @MrWormHole was stored as https://asciinema.org/font/meslonf.woff, then in the webpage there would have to be:

@font-face
{
font-family: meslonf;
src: url('font/meslonf.woff') format('woff’);
}

and the font-family-monospace (or the terminalFontFamily of the player) would change to:

meslonf,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace

I assume there would need to be some way to differentiate what font to prefer, so supporting ?font=meslonf would be nice. Adding a button like Use Nerd font should be easy enough.

---

Thanks for making such a great tool @sickill. :+1: I guess I could create my own JavaScript player with the font set, but it would be neat to have this function on the default webpage and not have to learn JS. :sweat_smile:

[mrwormhole]

I still think the issue is related to terminal recorder, for instance when I turn the format into gif for zsh + powerlevel10k theme, it gives square brackets. Maybe a specific flag terminal font can be supplied?

I use rust based agg for converting asciinema format to gif

I am missing something but not sure

[xsebek]

@MrWormHole in the linked issue asciinema/asciinema-player#140 someone linked a blog post on how to fix this if you are self-hosting and it looks like the squares are expected:

EDIT: out of interest, how do you use agg to convert asciinema to GIFs @MrWormHole?

[mrwormhole]

Thanks very much, appreciate it.

I run asciiname rec then I get URL at the end of the record. Then I run agg <asciinema-URL> ./here.gif it essentially downloads the gif from asciinema and turns into gif. You can also do directly from your cast file to gif file https://github.com/asciinema/agg @xsebek

[mrwormhole]

ooooohhh sweet baby jesus @xsebek you solved it, I did this and it works beautifully now (color is blue but don't care about pink)

agg /tmp/tmprcpweykx-ascii.cast ./my.gif --font-family="MesloLGS NF"

I think this issue is no longer related to asciinema server, it is simply how your clients(frontends use fonts and display those, rather than going full static hosting path, I would recommend doing that on converter tool side, cast format is pretty damn interchangeable so it is client's responsibility to provide fonts, I would probably close this issue, official server would not prefer to do full static hosting for every single font we ask for, therefore I believe this has to be suplemented with converter tools --font-family flags and user should worry by itself)

[xsebek]

@MrWormHole I disagree - if we could afford ~750kB mesloNF.woff (current fonts directory is 1.2MB) then that would allow supporting any Powerline or NerdFont recording since all the extra glyphs are shared between fonts.

Maybe there is some CSS magic that would only pull this asset when the URI contains ?font=mesloNF or something.

Good to know about agg, I expected the feature to be part of asciinema and Googling pointed me to savage13/agg. :smile:

[mrwormhole]

@xsebek if the frontend was using code splitting for font loading, this wouldn't be a problem, if it is built in MVC ways, they can not do stylesheet loading based on the page dynamically. Therefore have to load the font on every page.

The example you mentioned is also possible but requires code splitting on CSS/SCSS/LESS which requires modern tooling like webpack/rollup/esbuild (static bundle optimizers), partially loaded static bundles ruin browser caching between pages but I am sure you can do that

750kb is too much btw still

[ku1ik]

As you figured earlier, font rendering is not related to terminal recorder, which itself knows nothing about fonts. It only saves terminal output stream to a file. All the issues with font rendering are in frontends (asciinema-player, agg).

I've implemented support for Nerd Fonts (opt-in, for each uploaded recording) in #412. It brings Fira Code and JetBrains Mono variants for start. Indeed including every single Nerd Font variant I'd rather avoid, but let's see if we can get by with these 2. In the end people request Nerd Font support mostly for icons/symbols, not for specific font faces.

Regarding conditional fetching of fonts - in fact browsers only fetch custom font faces that are in use on the page. So having all necessary @font-face definitions in CSS is harmless. #412 allows enabling Nerd Font per recording for those who need it, but for majority of recordings the actual font files won't be fetched. At least it looks like this according to my tests.

[ku1ik]

Also, check out latest agg - it has lots of font related improvements as well: https://github.com/asciinema/agg#fonts

[ku1ik]

Nerd Font support is now live on asciinema.org