Vietnamese web fonts: subsetting, font-display and avoiding layout shift

A web font is a small resource, but it sits right on the rendering path of most web pages. The browser only learns which font it needs after it has read the CSS, so text can appear late, appear in another font and then change, or push the content below it down the page.

Vietnamese adds a further trap: accented letters live in several character blocks, and the default file split can pull in a heavy file that is not needed. This article draws on web.dev, Chrome for Developers, MDN, Next.js, the W3C CSS Fonts draft and the Web Almanac 2025, checked on October 23, 2026.

It answers 4 questions: which character blocks Vietnamese needs, how to subset and self-host, which font-display to choose, and how to reduce layout shift. Click Star already has articles on image optimization, INP and Core Web Vitals, so this one covers fonts only.

Key points

• According to web.dev, web fonts cause 2 problems: text that appears late (slowing FCP, sometimes LCP) and layout shift when a fallback font is swapped for a web font of a different size. A good CLS is 0.1 or less at the 75th percentile.
• Vietnamese needs at least 2 character blocks. Click Star counted 146 letters, the vowels with all tone marks plus đ (upper and lower case), in the Inter font: 44 in the latin block, 102 in the vietnamese block, and 20 of those also fall in latin-ext.
• Google Fonts CSS declares latin-ext after vietnamese, and under CSS Fonts the rule declared later is checked first. In Click Star's test, every text with đ, ă, ơ or ư pulled the 85,068-byte latin-ext file though the vietnamese file already had the glyphs.
• font-display decides whether text is hidden or shown in a fallback font while the web font is missing. Swap shows text at once but can shift; optional avoids shifts but may skip the web font on the first load.
• size-adjust makes a fallback font occupy nearly the same space as the web font. In Click Star's test, the line count of 3 sample paragraphs differed between Arial and Inter at 5 of 9 widths, while the adjusted fallback matched at 8 of 9.
• Preload should be reserved for the main font, needs crossorigin and ignores unicode-range. Self-hosting is not automatically faster: web.dev finds the difference unclear.

How web fonts slow text down and cause layout shift

According to web.dev (the article "Best practices for fonts", updated October 4, 2022), if a font has not finished loading the browser usually delays rendering text. Layout shift happens when the web font and the fallback font take up different space. A good CLS is 0.1 or less at the 75th percentile (web.dev, CLS article, updated April 12, 2023).

The mechanism is about order of work. According to web.dev ("Optimize WebFont loading and rendering", updated August 16, 2019, code samples dated, mechanism still valid), the browser requests the font only after it has built the render tree from the DOM and CSS, so the race with the first paint creates "blank text".

Which character blocks Vietnamese needs

At least 2 blocks: basic Latin and the Vietnamese block. Vietnamese has 12 base vowels (a, ă, â, e, ê, i, o, ô, ơ, u, ư, y), each in 6 forms (plain and 5 tone marks), in 2 cases, plus đ and Đ: 146 letters in total, counted by Click Star.

According to MDN (updated April 20, 2026), unicode-range tells the browser which characters a font file is used for. If the page uses no character in the range the file is not downloaded; if it uses at least 1 character the whole file is downloaded.

Click Star read the CSS that Google Fonts returned for Inter on October 23, 2026 (Chrome User-Agent on Windows): 7 blocks, with vietnamese listed before latin-ext and latin. The vietnamese block includes the combining tone marks and the dong sign ₫ (U+20AB).

Of the 146 letters: 44 belong only to the latin block (such as à, á, â, ê, ô, ú, ý), 82 belong only to vietnamese, and 20 belong to both vietnamese and latin-ext (ă, đ, ĩ, ũ, ơ, ư, ỳ, ỵ, ỷ, ỹ and their capitals).

When ranges overlap, the W3C draft CSS Fonts Module Level 4 (October 22, 2026) says the last @font-face rule declared is checked first for each character. Google declares latin-ext after vietnamese, so the 20 overlapping letters go to latin-ext first. Click Star ran Chromium 147 (Playwright) with that CSS:

• The letters đ, ă, ơ, ư, ĩ, Đ on their own: each pulls only the latin-ext file.
• The letter ế pulls only the vietnamese file, and the letter à pulls only the latin file.
• A full Vietnamese sentence pulls all 3 files: vietnamese, latin and latin-ext.
• After reversing the order so vietnamese is declared last: the full sentence pulls only vietnamese and latin.

For prices in ₫: the sign is in both the vietnamese and latin-ext ranges (U+20A0 to U+20AB). In the same test, ₫ alone pulled only latin-ext; with the order reversed, only vietnamese.

A condition applies: the vietnamese file must contain the glyphs. For Inter, the latin and vietnamese files together cover all 146 letters and the ₫ sign; another font needs the same check on its own files.

Subsetting, WOFF2 and self-hosting versus a service

Use WOFF2 only. Web.dev (2022) says WOFF2 compresses about 30% better than WOFF thanks to Brotli and is supported everywhere.

Click Star measured the WOFF2 file sizes Google returned for Inter on October 23, 2026. Variable font (weight 100 to 900): latin 48,256, vietnamese 10,252, latin-ext 85,068 bytes, 143,576 bytes in total; without latin-ext it is 58,508. Asking for weight 400 only returns a static font: 23,664, 4,972 and 35,000 bytes, 63,636 in total, or 28,636 without latin-ext.

This fits web.dev: a variable font is usually heavier than a static file and pays off only when several weights are needed.

On self-hosting, no source gives a firm verdict. Web.dev (2022) writes that on paper self-hosting removes 1 third-party connection but in practice the difference is not clear-cut, and a CDN plus HTTP/2 should be in place. The Web Almanac 2025 notes that browsers partitioning the cache by site removed some of the old advantage of Google's CDN.

If you self-host, web.dev advises doing the work big services do for you: WOFF2 and subsetting (tools it names: subfont, glyphanger), and checking that the license allows it (Click Star gives no legal advice: read each file's license).

font-display: which value to choose

According to MDN (updated September 10, 2026), font-display splits a font's loading life into 3 periods: block (text drawn in an invisible fallback font), swap (a visible fallback font is used and the web font replaces it when it arrives) and failure (the fallback is kept).

Web.dev's table (2022), block period then swap period: block 2 to 3 seconds then unlimited; swap 0 ms then unlimited; fallback 100 ms then 3 seconds; optional 100 ms then none; auto varies by browser. Web.dev says it is hard to recommend a single approach; you can combine swap for brand elements with optional for body text.

The Web Almanac 2025 records about 50% of pages using swap, about 25% using block (about 70% of that from icon fonts) and about 0.5% using optional.

Preloading the main font

Preload lets the browser fetch the font early. Web.dev (2022) warns that preload takes bandwidth from other resources, and that inlining the @font-face declaration in the head may be more effective. Preload ignores unicode-range, so preload only files you are sure to need.

According to MDN (updated May 20, 2026), preloading a font requires crossorigin, even when it is same-origin.

Fallback fonts with adjusted metrics

The article "Improved font fallbacks" from Chrome for Developers (updated February 10, 2023) shows how to build a fallback font from a locally installed font. size-adjust scales the glyphs; ascent-override, descent-override and line-gap-override adjust vertical metrics. It names Arial for sans-serif fonts, but Arial is not available on Android.

According to MDN (updated April 20, 2026), size-adjust has been widely available since September 2023, while ascent-override is marked "limited availability", not Baseline.

For Vietnamese there is a gap: the Chrome article computes average width from English letter frequency. The next/font/local code on GitHub carries the comment "TODO: Currently only works for the latin alphabet" and uses a sample string of unaccented letters. Click Star found no source that validates this calculation for Vietnamese.

Click Star ran an illustrative test: 3 Vietnamese paragraphs of 511 characters, 16px text, 1.5 line height, Chromium 147 on macOS. Inter is 5.97% wider than Arial (size-adjust about 106%).

Line count of the 3 paragraphs at 9 container widths (260 to 414 px): Arial differs from Inter at 5 widths (260, 300, 340, 358, 390 px), each time by 1 line. The fallback adjusted with size-adjust and ascent, descent matches Inter at 8 of 9 widths (it differs at 300 px).

A 1-line difference moves the content below.

With Next.js

According to the Next.js documentation (updated September 24, 2026), next/font downloads Google fonts at build time and self-hosts them, with no browser requests to Google. The subsets option only decides which subsets are preloaded; display defaults to swap; adjustFontFallback is on by default for Google fonts.

For Vietnamese, add "vietnamese" to subsets. The next 16.2.4 source that Click Star read collects every font file in the Google CSS and marks only the subsets listed in subsets for preload.

Click Star's inference, not checked on a real build: if the self-hosted CSS keeps Google's order, the order rule above still applies. Open the Network panel after a build.

How to measure

Use the Chrome DevTools Network panel (web.dev points to its Timing tab to check requests come early enough), filter by Font, and count the files and bytes on a page with real Vietnamese text. The final yardstick is field CLS at the 75th percentile, split by mobile and desktop.

Click Star's view. Click Star's judgment on priority: load the right files first (right character blocks, WOFF2, few files), then font-display and the fallback font, and preload last because it is prone to side effects. The declaration order of character blocks often matters more than fine-tuning metrics.

Disclosure: Click Star offers SEO-ready, fast-loading website design, so it has an interest in this topic.

A 7-day plan for a website with Vietnamese text

This is a reference framework from Click Star, not taken from outside sources.

• Day 1: list fonts, weights and sources; record file count and total bytes on 3 representative pages.
• Day 2: open a real Vietnamese page and check for a latin-ext file or surplus weights.
• Day 3: fix file set and order, move to WOFF2; self-host only after reading the license.
• Day 4: set font-display deliberately for each font.
• Day 5: add an adjusted fallback font; test on Windows, macOS, Android.
• Day 6: preload the main font with crossorigin, then check the Network panel.
• Day 7: turn on field CLS monitoring and set a before-and-after baseline.

What is not known

Click Star has no measurement of the share of Vietnamese websites that suffer layout shift from fonts. The measurements in this article cover only the Inter font, Chromium 147 and 1 text sample.

Click Star found no independent study on how accurate size-adjust is for Vietnamese text. The behavior of Safari and Firefox for font-display, preload and the metric descriptors was not rechecked in current versions.

The Google Fonts FAQ page is a JavaScript shell that tools cannot read, so the service's license and privacy terms were not checked. No source settles self-hosting, and Click Star has no measurement of its own.

Common mistakes

1. Declaring only the latin subset for a Vietnamese page, so accented text falls back to a system font.
2. Keeping the service's block order without checking which files a real Vietnamese page downloads.
3. Loading a full-weight variable font for a page that uses 1 weight.
4. Using font-display: block for body text, which hides it for 2 to 3 seconds if the font is late.
5. Preloading too many files or forgetting crossorigin.
6. Fixing line height to cure layout shift instead of adjusting the fallback font.
7. Self-hosting a font without reading its license.