Glyph lab

// The face sits in cells of fixed width, so a new face never moves the
// cloud or the line beside it: ･ and ᵔ draw differently but take 0.5em.
export function FaceCells({ face }: { face: Face }) {
  return (
    <>
      <span className="inline-block w-[0.5em] text-center">{face[0]}</span>
      <span className="inline-block w-[0.64em] text-center">{face[1]}</span>
      <span className="inline-block w-[0.5em] text-center">{face[2]}</span>
    </>
  );
}

// Its own font, of only the characters it draws. With a unicode-range the
// page's text never picks it up, and it isn't fetched until one is drawn.
const cloud = localFont({
  src: "./fonts/Cloud.woff2",
  variable: "--font-cloud",
  preload: false,
  adjustFontFallback: false, // Arial behind it would take the face's ASCII
  declarations: [{ prop: "unicode-range", value: "U+02D8,U+03C9,…,U+FF65" }],
});

Why it has a font of its own

The page loads one font for reading, Inter, and only its Latin subset. Everything else the cloud draws, the Yi radicals of its outline, a Japanese middle dot for each eye, a Thai digit for the cheek, braille for a spinner, would come from whatever each system has to fall back on, a different font for each piece: on one system the pieces happen to match, on another they don't, and where nothing has them they're empty boxes. Switch the font to Without it above to see what yours does.

So the cloud carries its own: 49 glyphs from eight Noto fonts, under the SIL Open Font License. It's declared with a unicode-range, so the page's text never picks it up, and it isn't preloaded, so a page without the cloud never fetches it.

How it's made

A Python script with fonttools takes each Noto file down to the glyphs it lends, keeping only outlines and metrics (the sources disagree on everything else, and the merger refuses). It scales the props so none outweighs the face and centres them on the cloud's middle, narrows the block elements into bars set on the baseline, merges the lot, renames it Cloud, as the licence asks of a modified font, and gives it Noto Sans's vertical metrics, so a line holding the cloud is no taller than a line of text. A second script reads the result back for this page.

Next.js usually sets a metric-matched Arial behind a local font to limit layout shift. Here that fallback has no unicode-range of its own, so it would draw the face's plain ASCII, the - of closed eyes and the o of a talking mouth, in place of Inter: adjustFontFallback is off for this one.