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.
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?
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".
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.
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.
I was happy. It felt clean. No font files, no library, no dependency. Just math.
Before this big math block existed, Unicode had already added a few of these styled letters in a different block called Letterlike Symbols at U+2100 to U+214F. They were added because people already used them as single math symbols. Things like โ for real numbers and โ for a Hilbert space.
So when the big block was designed later, those letters were left out. Unicode did not want to encode the same character twice. The official Unicode chart says this directly about the double-struck letters: they are "omitted here to avoid duplicate encoding."
The result for me is simple. My math formula was pointing at empty slots. Empty slot means empty box on screen.
I had to build an exception list. Here is every hole that affects normal A to Z text, and where the real character actually lives:
Now look at which styles are not in that list. Bold, bold italic, bold script, bold fraktur, sans-serif and sans-serif bold are all fine. Their letters sit in one clean run with no gaps. Pure math works perfectly for them.