Skip to content

Building a Multilingual Website That Renders Vietnamese Correctly

Vietnamese diacritics silently drop into a fallback font more often than teams expect — this piece covers the font check, line-height, currency symbol, and routing fixes that catch it before launch.

7 min read

A before-and-after graphic showing what breaks when building a multilingual website that renders Vietnamese correctly, and what a fixed version looks like once each check passes.

You ship the Vietnamese version of the site, someone opens it on their phone, and the diacritics are gone — tone marks missing, đ turned into a plain d, half the headline sitting in a fallback font that doesn't match the rest of the page. That's the usual failure mode of building a multilingual website that renders Vietnamese correctly: it's not a translation problem, it's a font and rendering problem, and it almost always only shows up after launch.

None of it is hard to catch. It just has to be checked on purpose, before the font, line-height, and routing decisions get buried three redesigns deep and nobody remembers to look again.

A before-and-after comparison of a website's Vietnamese rendering: broken diacritics and fallback fonts on one side, checked fonts, line-height, and routing on the other.
Every item on the checked side is testable before launch — none of them require waiting for a visitor to report it.

Run one check before you trust any font with Vietnamese

Most font failures on Vietnamese pages aren't a translation problem — they're a font problem that only shows up after launch, when a heading quietly drops its tone marks and nobody notices until a Vietnamese visitor does. The fix is a check you can run before a font ever ships to production.

Request the font's CSS from Google Fonts using a real browser user agent, and look at what comes back. A font that actually supports Vietnamese returns a distinct block in the response, commented as the Vietnamese subset, with a Unicode range covering the Vietnamese diacritic block and the ₫ currency symbol. Skip the user agent, or add certain subset parameters to the request, and the response collapses to a tiny stub that tells you nothing either way — the check only works if it's run the right way.

Testing this against common typefaces turns up a clear split: Be Vietnam Pro, Inter, Fraunces, Noto Sans, Manrope, and Lora all carry proper Vietnamese support. Sora, Figtree, and Bodoni Moda do not — pick one of those for a Vietnamese heading and it will fall back to a system font the moment a diacritic appears, breaking type consistency exactly where a Vietnamese-language page needs to look deliberate, not improvised.

Line-height built for Latin text clips Vietnamese diacritics

Vietnamese stacks marks above and below the vowel — a tone mark on top, sometimes a second mark underneath. A line-height comfortable for English or Chinese text often doesn't leave room for both, so the top of one line's diacritics touches or clips the bottom of the line above it.

The practical fix is to set line-height to at least 1.15 for any block of Vietnamese body text, and more for display headings, where the type is larger and clipping is more visible. This isn't a Vietnamese-specific override buried in a separate stylesheet — it needs to sit in the same responsive rules that already handle the rest of the site, or it gets forgotten the next time someone touches typography.

The ₫ symbol and number formatting need their own check

The Vietnamese đồng symbol is easy to miss in a font audit because it sits outside the character ranges most Latin-only fonts bother to cover, and outside the CJK ranges too. A font can render Vietnamese text cleanly and still drop ₫ into a fallback glyph the moment a price appears next to it.

Number formatting is worth a separate look as well — Vietnamese convention groups and separates digits differently than English does, and a checkout page that silently applies English formatting to Vietnamese-displayed prices reads as a translation that was never actually finished.

Language routing has to be tested with a direct link, not just the switcher

A language switcher that works perfectly in a demo can still hide a routing bug that only shows up on real traffic: a visitor arriving from a shared social link, a search result, or a bookmark lands on the Vietnamese path directly, without ever touching the switcher — and that's exactly the path most likely to be skipped in testing.

Before launch, test the Vietnamese path the way a real visitor would find it: open the direct link in a fresh, signed-out session, not by clicking the switcher from an already-loaded English page. Confirm the page actually renders in Vietnamese from the first paint, not after a flash of English while the page decides what language to show.

FAQ

How do I check if a font actually supports Vietnamese before using it on a live site?
Request the font's CSS from Google Fonts with a real browser user agent and check the response for a Vietnamese subset block with the right Unicode range — skipping the user agent or adding certain subset parameters gives a stub response that won't tell you anything.
Which fonts are safe to use for Vietnamese without extra work?
Be Vietnam Pro, Inter, Fraunces, Noto Sans, Manrope, and Lora all carry proper Vietnamese support out of the box. Sora, Figtree, and Bodoni Moda don't, and will silently fall back to a system font on Vietnamese diacritics.
Why do Vietnamese headlines look cramped or clipped even with a correct font?
Vietnamese stacks diacritics above and below the vowel, and line-height set for Latin text often doesn't leave enough vertical room. Setting line-height to at least 1.15 for Vietnamese text blocks usually fixes it.
Why does a Vietnamese visitor sometimes still see the English version of the site?
Usually a routing bug that only shows up on a direct link — the switcher works fine in testing because it's always tested from an already-loaded page, not from a fresh session landing straight on the Vietnamese path.

Related reading

Want to see a system actually running?

Tell us the stage that hurts most, and we'll bring the working system to the conversation.

Book a demo