Describe the bug

Character references defined in HTML[1] for ideographic variation sequences (IVS) defined in Unicode[2] doesn’t work.

Reproduction

1. Make a minimal project by npx sv.
2. Download a font file “Noto Serif JP” from Google Fonts () (the Google Fonts’ webpage uses the name “Noto Serif Japanese” but internally it seems to use the name “Noto Serif JP”).
3. Place the downloaded font file NotoSerifJP-VariableFont_wght.ttf to the static directory of the project.
4. Write the following to src/routes/+page.svelte:

<div class="font-noto-serif-jp">
  通&#xE0100;通&#xE0101;
</div>

<style>
  @font-face {
    font-family: "Noto Serif JP";
    src: url("/NotoSerifJP-VariableFont_wght.ttf") format("truetype");
  }
  .font-noto-serif-jp {
    font-family: "Noto Serif JP";
  }
</style>

5. Check the following output:

The first character must has one point at the top‐left, and the second character must has two points at the top‐left. So they must be different. However, both have only one point, they are same.

We can confirm naive HTML + CSS gives the desired result:

Logs

System Info

npx envinfo --system --npmPackages svelte,roolup,webpack --binaries --browsers

  System:
    OS: macOS 15.4.1
    CPU: (8) arm64 Apple M3
    Memory: 226.14 MB / 24.00 GB
    Shell: 4.0.1 - /opt/homebrew/bin/fish
  Binaries:
    Node: 23.11.0 - /opt/homebrew/bin/node
    npm: 10.9.2 - /opt/homebrew/bin/npm
    pnpm: 10.7.0 - ~/Library/pnpm/pnpm
  Browsers:
    Safari: 18.4
  npmPackages:
    svelte: ^5.0.0 => 5.28.2

Severity

annoyance