Copy-Paste Fonts Are Not Fonts. Here Is What Broke My Code

This is part 4 of my beginner journey. In part 1 I did not know what to learn first. In part 2 I stopped overthinking and picked a project: Fonti, a free copy-paste font generator. In part 3 I chose my tools (Astro, Git, Cloudflare Pages) and promised the next post would be about the actual build. NOTE: I renamed the project from Fontly to Fonti since part 3. Same tool, better name. This is that post. My first real code of this series. And it starts with me being completely wrong about how these tools work. What I thought I was building My idea was simple. The user types text. I apply a font. They copy it and paste it into their Instagram bio. I spent a few days confused about one part of that plan. How does a font survive a copy-paste? If I load a font on my website, that font lives on my website. Instagram does not have it. So how does the style travel? The answer is that it does not. There is no font. There never was. The real trick When you paste 𝐛𝐨𝐥𝐝 text somewhere, you are not sending style information. You are sending different characters that are shaped like bold letters. The b in that bold word is not the letter b. It is a math symbol that looks like a bold b. Unicode has a block called Mathematical Alphanumeric Symbols. It lives at U+1D400 to U+1D7FF. It has 1024 slots, 996 of them are used, and 28 are empty on purpose. It was added in Unicode 3.1 in the year 2001. Why does it exist? Because mathematicians need 𝐴 and 𝔸 and 𝒜 to mean three different things in the same paper. In math, the style is part of the meaning. So Unicode gave each style its own real character. Social media users then found these characters and started using them for stylish bios. That is the whole industry of "font generators". So my tool is not a font tool. It is a lookup table. That is it. This also connects back to something from part 3. I chose Astro because it sends very little JavaScript by default, and only sends it where the page really needs it. Now I know exactly what that JavaScript is: one small function that swaps characters. Everything else on the site can stay as plain HTML. My first version If the styled letters are stored in alphabetical order, then converting text is just simple math. Normal A is at U+0041. Bold A is at U+1D400. So I take the letter's number, subtract the start of the normal alphabet, and add the start of the bold alphabet. const OFFSETS = { bold: { upper: 0x1D400, lower: 0x1D41A }, italic: { upper: 0x1D434, lower: 0x1D44E }, script: { upper: 0x1D49C, lower: 0x1D4B6 }, fraktur: { upper: 0x1D504, lower: 0x1D51E }, doubleStruck: { upper: 0x1D538, lower: 0x1D552 }, sansSerif: { upper: 0x1D5A0, lower: 0x1D5BA }, }; const convert = (text, style) => { const { upper, lower } = OFFSETS[style]; return [...text].map((ch) => { const code = ch.charCodeAt(0); if (ch >= "A" && ch = "a" && ch { const { upper, lower } = OFFSETS[style]; const gaps = EXCEPTIONS[style] ?? {}; return [...text].map((ch) => { if (gaps[ch]) return gaps[ch]; const code = ch.charCodeAt(0); if (ch >= "A" && ch = "a" && ch