Wrong font when displaying superscript numbers

Question

I'm trying to render some superscript numbers like this: ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁰ with a custom font, but only the first 3 numbers display using the current font-family. The others display with the default page font.

Here's a working example:

@font-face {
  font-family: "verveine";
  src: url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.eot");
  src: url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.eot?#iefix")
      format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.woff2")
      format("woff2"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.woff")
      format("woff"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.ttf")
      format("truetype"),
    url("//db.onlinewebfonts.com/t/b3fb273a4c9c465126f860b59809fd4a.svg#VerveineW01-Regular")
      format("svg");
}

body {
  font-family: verveine;  
}

Test 1 2 3 4 5 6 7 8 9 0<br/>
Test ¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹ ⁰

But when I go to the Verveine font page on Adobe's site and enter these superscript numbers, they display correctly:

How can I fix this?

Edit:

For now I'm going with this fairly heavy-handed solution of parsing the text and wrapping each superscript number in a sup tag

function fixSuperNumbers(input: string): ReactNode[] {
  const supers: Record<string, string> = {
    "¹": "1",
    "²": "2",
    "³": "3",
    "⁴": "4",
    "⁵": "5",
    "⁶": "6",
    "⁷": "7",
    "⁸": "8",
    "⁹": "9",
    "⁰": "0",
  };
  let results: ReactNode[] = [""];

  for (let c of input.split("")) {
    if (supers.hasOwnProperty(c)) {
      results.push(<sup>{supers[c]}</sup>, "");
    } else {
      results[results.length - 1] += c;
    }
  }

  return results.map((result, i) => <Fragment key={i}>{result}</Fragment>);
}

Answer 1

Some fonts doesn't support all Unicode characters. In that case, such characters will use fallback/ system fonts.

When you tested it on Adobe's site, you haven't activated the font you mentioned.

Once you activate the font, you can see that the unicode characters aren't supported by the font.

The Unicode values of your code are

%B9
%B2
%B3
%u2074
%u2075
%u2076
%u2077
%u2078
%u2079
%u2070

1,2 and 3 belongs to Bx group and the rest belongs to 207x group.

I used FontDrop to inspect the glyphs and it does support Bx group but not 207x group.

That's why you're seeing 1-3 OK and 4-0 Not OK.