DEV Community

Cover image for Why "fancy fonts" in Discord and Instagram bios turn into boxes
Mok
Mok

Posted on

Why "fancy fonts" in Discord and Instagram bios turn into boxes

#webdev #unicode #discord #javascript

You've seen it everywhere — 𝓬𝓾𝓻𝓼𝓲𝓿𝓮 Discord names, 𝗯𝗼𝗹𝗱 Instagram bios, ʙᴜʙʙʟᴇ usernames. You've probably also seen the cursed version: someone's clever bio rendered as a row of □ □ □ boxes.

Here's what's actually going on under the hood, and why it breaks for some people but not others.

These aren't fonts. They're characters.

When you "change the font" with one of those copy-paste generators, you're not applying a typeface. A real font change needs CSS or an installed font file — neither of which you can paste into a Discord username field.

Instead, the trick uses different Unicode characters that happen to look like styled letters.

The plain Latin a is U+0061. But Unicode also contains:

  • 𝐚 Mathematical Bold — U+1D41A
  • 𝑎 Mathematical Italic — U+1D44E
  • 𝓪 Mathematical Bold Script — U+1D4EA
  • 𝕒 Mathematical Double-Struck — U+1D552
  • ⓐ Circled Latin — U+24D0

Most of these live in the Mathematical Alphanumeric Symbols block (U+1D400–U+1D7FF), which was added for math notation. People repurposed them as "fonts."

So a generator is really just a lookup table:

const bold = { a: '𝗮', b: '𝗯', c: '𝗰', /* ...rest of the alphabet */ };

const toBold = (text) =>
  [...text].map((ch) => bold[ch] ?? ch).join('');

toBold('hello'); // 𝗵𝗲𝗹𝗹𝗼
Enter fullscreen mode Exit fullscreen mode

That's the whole magic. No fonts — just character substitution.

Why it turns into □ boxes

A □ (officially .notdef, informally tofu) appears when the device rendering the text has no glyph for that code point.

It's not a Discord bug or an Instagram bug — it's the viewer's device missing the character. That's why the same bio can look perfect on your phone and broken on your friend's.

Glyph coverage varies a lot:

  • Modern iOS / updated Android — broad coverage
  • Older or budget Android — much narrower, and this is where it breaks most

The worst offenders: combining marks

Some "styles" don't even use dedicated characters. Strikethrough and underline stack a combining mark after each normal letter:

const strike = (text) =>
  [...text].map((ch) => ch + '̶').join('');

strike('hello');
// h̶e̶l̶l̶o̶   on desktop
// h□e□l□l□o□  on many Android builds
Enter fullscreen mode Exit fullscreen mode

U+0336 is "combining long stroke overlay." On desktops it overlays cleanly; on a lot of Android builds it detaches into a box. These combining-mark styles are the ones most likely to break — and the ones I'd avoid for anything public like a username.

So which styles are safe?

Rule of thumb: dedicated characters from the Mathematical Alphanumeric block are safe; combining-mark tricks are risky.

Safe almost everywhere:

  • Bold, Italic, Bold Italic
  • Script / Cursive
  • Fraktur / Gothic
  • Double-struck
  • Small caps
  • Monospace

Risky (test before using publicly):

  • Strikethrough, underline (combining marks)
  • Zalgo / "glitch" (stacked combining marks)
  • Rare decorative or regional symbols

Practical takeaway

If you're building or using one of these, lean on the Math Alphanumeric block and skip the combining-mark styles for anything other people will see on unknown devices.

I went down this rabbit hole because every generator I tried would happily dump broken characters into a Discord name. I ended up building FontPaste — it only ships styles I tested to render across iOS, Android, and Discord, so you don't paste a row of boxes into your bio.

If you just want the mechanism: it's substitution tables + glyph coverage. If you want it to actually work for everyone: stick to the safe block and test on a cheap Android phone.

Top comments (0)