Surprising default font-fallback for some `#sym.arrows` in normal mode

Description

When using variants of #sym.arrows.filled in normal mode, in the web app, the arrows render using different fonts in a somewhat surprising manner (picture below). Screenshot 2024-06-10 at 15 26 29

Note that there are 3 different kinds of arrows in the second column of the first row. This is the default behaviour without changing any font parameters.

Preliminary discord discussions identified the cause to be the fallback order of fonts and in particular the default order.

Further tebine provided some pieces of information that might be useful:

[...] The other arrows you had look like those from DejaVu Sans. This is used as fallback because the default font (Linux Libertine unless you chose something else) doesn't have these arrows. Now in the webapp, it looks like there's another font that has the top-left arrow, and while looking for a fallback, typst checks this font before checking DejaVu Sans

looks like the pixelated arrow is from the font VG5000

weird to have that [VG5000] as fallback before DejaVu Sans [...]

I'd say it's quite easy to run into this behaviour. In the first page of the tutorial there is an example using arrows.squiggly. It states something to the effect that the same symbol can be used outside of math-mode with #sym.arrows.squiggly. That and the discoverability of the lsp is all it takes.

In the webapp the preview seems to be rendered to a png. I assume that happens on the server. So the relevant system details is that of the server. One can also download the pdf of course. That gives similar issues (picture below). Screenshot 2024-06-10 at 16 23 07

As you can see I also tried a few other arrow symbols to compare, and the hook symbol does something similar. The list is not comprehensive of course.

Here's the document I used to generate the table, if anyone want to extend it for debugging.

#let foo = {
  let d =  sym.arrow.filled
  [ #d.t #d.tr #d.r #d.br #d.b #d.bl #d.l #d.tl ]
}
#let bar = {
  let d = sym.arrow.hook
  [ #d.bl #d.br #d.l #d.r #d.tl #d.tr ]
}
#let baz = {
  let d = sym.arrow.squiggly
  [ #d.l #d.long #d.r ]
}
#let fuz = {
  let d = sym.arrow.double
  [ #d.b #d.bar #d.bl #d.br #d.l #d.long 
  #d.not #d.r #d.t #d.tl #d.tr ]
}
#let zuz = {
  let d = sym.arrow.loop
  [ #d.l #d.r ]
}
#table(columns: (auto,auto,auto),
table.header([],[math mode],[normal mode]),
[arrows.filled], [$#foo$], [#foo],
[arrows.hook], [$#bar$], [#bar],
[arrows.squiggly], [$#baz$], [#baz],
[arrows.double], [$#fuz$], [#fuz],
[arrows.loop], [$#zuz$], [#zuz]
)

Reproduction URL

No response

Browsers

Firefox, Safari

OS

No response

typst / webapp-issues