Turns out "fancy Instagram fonts" are just Unicode — here's how I built a generator for it

#javascript #webdev

A while back someone half-jokingly asked if I could make a tool that turns "hello" into "𝓱𝓮𝓵𝓵𝓸" for their Instagram bio. My first instinct was "that's just a custom font" — but it's not. You can't swap fonts inside a plain text field on Instagram, TikTok, or Discord. So how do all those stylized bios actually work?

Turns out the trick has nothing to do with fonts. It's Unicode.

The block nobody tells you about: Mathematical Alphanumeric Symbols

Unicode reserves a whole range (U+1D400–U+1D7FF) called Mathematical Alphanumeric Symbols. It exists so mathematicians can write 𝐀 (bold), 𝐴 (italic), 𝒜 (script), 𝔄 (fraktur) as genuinely distinct characters instead of relying on rich-text formatting. Nothing stops you from typing them into a regular text field, though — they render exactly like normal text, no font, no app support required.

So a "fancy font converter" is really just a character-substitution cipher against a lookup table. For every style I built a 62-character string covering A–Z, a–z, 0–9, mapped 1:1 onto the matching styled code points:

const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

const fontsMapping = [
  { id: "serifBold", map: "𝐀𝐁𝐂𝐃𝐄𝐅𝐆𝐇𝐈𝐉𝐊𝐋𝐌𝐍𝐎𝐏𝐐𝐑𝐒𝐓𝐔𝐕𝐖𝐗𝐘𝐙𝐚𝐛𝐜𝐝𝐞𝐟𝐠𝐡𝐢𝐣𝐤𝐥𝐦𝐧𝐨𝐩𝐪𝐫𝐬𝐭𝐮𝐯𝐰𝐱𝐲𝐳𝟎𝟏𝟐𝟑𝟒𝟓𝟔𝟕𝟖𝟗" },
  { id: "fraktur",    map: "𝔄𝔅ℭ𝔇𝔈𝔉𝔊ℌℑ𝔍𝔎𝔏𝔐𝔑𝔒𝔓𝔔ℜ𝔖𝔗𝔘𝔙𝔚𝔛𝔜ℨ𝔞𝔟𝔠𝔡𝔢𝔣𝔤𝔥𝔦𝔧𝔨𝔩𝔪𝔫𝔬𝔭𝔮𝔯𝔰𝔱𝔲𝔳𝔴𝔵𝔶𝔷0123456789" },
  // ...30 more of these
];

function convertString(str, font) {
  const mapArray = Array.from(font.map); // Array.from, not split() — more on that below
  let result = "";
  for (const char of str) {
    const index = chars.indexOf(char);
    result += index !== -1 && mapArray[index] ? mapArray[index] : char;
  }
  return result;
}

Two things bit me while building this:

1. Array.from() instead of .split(''). A lot of these code points live above U+FFFF, so they're encoded as surrogate pairs in JS strings. map.split('') slices a pair in half and hands you back mangled characters. Array.from() iterates by code point, which is what you actually want here.

2. Not every style has a full alphabet. Some Unicode "fonts" — small caps, superscript, the currency-symbol style — only exist for a subset of letters. There's no true Unicode superscript "Q," for instance, so I substituted the closest visual look-alike from a completely different block. For those styles it's not really a clean 1:1 cipher, it's closer to visual forgery.

The weird one: Zalgo text

The glitch/cursed-text effect (t̸h̶i̵s̴ ̶s̴o̷r̶t̵ ̶o̴f̵ ̸t̶h̷i̴n̶g̸) isn't from the same character block at all — it's combining diacritical marks. Normally these stack a single accent on top of a letter (the mark that turns e into é). Nothing stops you from stacking dozens of them on the same character:

const zalgoUp   = ["̍", "̎", "̄", /* ...36 more */];
const zalgoMid  = ["̕", "̛", "̀", /* ... */];
const zalgoDown = ["̖", "̗", "̘", /* ... */];

for (const char of str) {
  result += char;
  const numUp = Math.floor(Math.random() * 2) + 1;
  for (let j = 0; j < numUp; j++) {
    result += zalgoUp[Math.floor(Math.random() * zalgoUp.length)];
  }
  // same idea for the mid and down mark sets
}

Randomly stack 1–2 marks above, 0–1 in the middle, and 1–2 below every character, and you get the "reality is glitching" look. It's not elegant — it's controlled chaos — but the randomness is exactly what sells the effect.

The other decorations are combining marks too

Strikethrough, underline, and overline use the same combining-character trick, just with a single mark appended after each letter instead of a lookup substitution:

{ id: "strikethrough", decorator: "̶" },
{ id: "underline",     decorator: "̲" },

"h" + "̶" renders as h̶. No lookup table needed — just append and skip spaces, since a combining mark attached to a space usually renders oddly or gets silently dropped by the renderer.

Why this breaks more than it should

Once you know the trick, the limitations make sense:

These are still plain Unicode characters to a screen reader, not letters — text-to-speech often can't pronounce them correctly.
Search engines and in-app search generally won't match "𝓱𝓮𝓵𝓵𝓸" against "hello," so you lose searchability the moment you use it.
Devices or fonts missing glyphs for the rarer blocks fall back to the classic empty box (☒).

None of that stops it from being fun — but it's worth knowing you're trading "cool font" for "no longer quite text" in the eyes of most software that touches it.

I turned the whole thing (30+ styles plus the Zalgo generator) into a small free tool if you want to play with it without building your own lookup table: Instagram Font Generator. No sign-up, it's a static page.