Quick wins for a faster PC:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →
ThatPainter is reader-supported. When you buy through links on our site, we may earn an affiliate commission. Learn More
A good font fallback does more than keep text visible while a web font loads. It should occupy nearly the same space, so line breaks, headings, buttons, and cards do not jump when the intended font replaces it.
The practical solution is to combine a deliberate font-display policy with a similar fallback font and the CSS descriptors size-adjust, ascent-override, descent-override, and, when appropriate, line-gap-override. This can greatly reduce reflow, but no fallback can make a different typeface visually identical.
What a font fallback is
A font fallback is the next usable font in a font-family list. The browser may use it when the preferred web font is still loading, has failed, lacks a requested weight or style, or does not contain a particular character.
body {
font-family: "Brand Sans", Arial, sans-serif;
}Here the browser tries Brand Sans, then Arial, then the generic sans-serif family.
#1 Best Overall
There are several distinct kinds of fallback:
- Unavailable web font: the file has not loaded or the request failed.
- Unavailable local font: a
local()source is not installed. - Missing glyph: another font supplies an individual character.
- Unavailable face: the requested weight, style, or width is missing.
- Metric fallback: a deliberately adjusted fallback designed to occupy similar space to the web font.
Why ordinary fallbacks cause layout shift
Two fonts set at 16px can have very different metrics. Their glyphs may be wider or narrower, their lowercase letters may have different x-heights, and their ascenders, descenders, and internal line gaps may produce different line boxes.
When the web font replaces the fallback, that difference can change:
- paragraph line breaks and height;
- heading wrapping;
- button and navigation widths;
- card, grid, and table dimensions;
- baseline alignment;
- the position of everything below the text.
font-display: swap makes text available quickly, but it does not make the fallback metrically compatible. Preloading or compressing the font can make replacement happen sooner; it cannot eliminate the difference between the two typefaces.
What “perfect” means
A perfect fallback is a useful engineering shorthand, not a literal promise. CSS can approximate the primary font’s:
- apparent size and x-height;
- horizontal advance widths;
- ascent above the baseline;
- descent below the baseline;
- line gap and resulting line box.
It cannot reproduce the primary font’s exact glyph shapes, kerning, hinting, character coverage, rendering, or visual weight. The goal is metric compatibility: reducing reflow while accepting that the fallback will look different.
The CSS Fonts specification describes metric overrides specifically as a way to make a fallback resemble a downloadable font and reduce layout shifting.
Choose the right font-loading policy
Metric tuning and loading behavior solve related but separate problems.
Recommended Free Tools
| Value | Use it when | Main trade-off |
|---|---|---|
swap |
Text must appear immediately and the custom font is important. | The browser may perform a late replacement, exposing any metric mismatch. |
fallback |
The custom font is desirable but not essential. | The swap window is limited, so some visits may retain the fallback. |
optional |
Stability and speed matter more than guaranteed branding. | Some visitors may never see the web font. |
block |
A brief invisible period is acceptable, such as for a specialized icon font. | Text can remain invisible and readability is delayed. |
The exact timing of these periods varies by browser. See the CSS Fonts definition of font-display for the intended behavior.
The CSS descriptors that make a fallback compatible
Define the fallback as a separate @font-face alias. Do not give the fallback the primary font’s family name; a separate name makes the stack and its behavior easier to debug.
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
body {
font-family:
"Brand Sans",
"Brand Sans Fallback",
Arial,
sans-serif;
}The percentages above are illustrative only. They are not universal values for Arial or any other unspecified font.
Rank #2
size-adjust
size-adjust scales the fallback’s glyph outlines and associated metrics. It is useful for bringing apparent lowercase size and average text width closer to the primary font.
Do not confuse it with font-size-adjust. The former is an @font-face descriptor that scales a face. The latter is a CSS property intended to preserve an aspect value such as x-height when the browser changes fonts. The CSS Fonts specification documents the distinction.
Ascent and descent overrides
ascent-override controls the portion of the font above the baseline. descent-override controls the portion below it. These affect vertical alignment and line-box calculations.
line-gap-override
line-gap-override controls additional font-internal leading. Setting it to 0% can make a fallback more predictable when the design uses an explicit line-height and the primary font has no effective line gap.
Do not set it automatically. Some typefaces rely on internal leading, and an aggressive override can make lines too tight or clip accents and descenders.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
A complete face-by-face implementation
Each commonly used weight and style should have a corresponding fallback face. Otherwise the browser may synthesize bold or italic styling, creating a new mismatch.
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-regular.woff2") format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-italic.woff2") format("woff2");
font-style: italic;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Brand Sans";
src: url("/fonts/brand-sans-bold.woff2") format("woff2");
font-style: normal;
font-weight: 700;
font-display: swap;
}
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
font-style: normal;
font-weight: 400;
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial Italic");
font-style: italic;
font-weight: 400;
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: "Brand Sans Fallback";
src: local("Arial");
font-style: normal;
font-weight: 700;
size-adjust: 97%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
:root {
font-family: "Brand Sans", "Brand Sans Fallback", Arial, sans-serif;
}The fallback names and metrics must be calculated for the actual primary font. If the fallback is unavailable, the ordinary Arial and generic family remain a valid last resort.
Generate values instead of guessing
Manual tuning can work, but font metadata is easy to misread and a value that improves one sample may make another worse. Build-time tools provide a more repeatable starting point.
Capsize
Capsize can create metric-adjusted fallback declarations and an ordered family stack from supplied font metrics.
Free tools Windows power users keep installed
One-click scans. No signup required.
import { createFontStack } from "@capsizecss/core";
import brandSans from "./metrics/brandSans.js";
import arial from "@capsizecss/metrics/arial";
const { fontFamily, fontFaces } = createFontStack([
brandSans,
arial,
]);
console.log(fontFamily);
console.log(fontFaces);Review the generated CSS rather than treating it as objectively perfect. Results depend on the supplied metrics, fallback order, and language or subset being targeted.
Rank #3
Fontaine
Fontaine is another build-time option. It generates fallback declarations from font metrics and adds the generated fallback to the family stack, making it particularly useful when it fits an existing JavaScript, Vite, or Nuxt pipeline.
How to select a fallback
Start with a typeface that resembles the primary font, then tune its metrics. Compare:
- script and character coverage;
- x-height and cap height;
- average lowercase width;
- ascender and descender proportions;
- stroke contrast and perceived weight;
- italic angle and construction;
- line gap;
- punctuation, symbols, and numerals;
- availability on target operating systems.
Match by typographic role, not merely category. A humanist sans usually needs a humanist sans fallback; a neutral grotesque may pair better with another neutral sans. For headings, width and cap height may matter most. For body text, x-height, line height, and average word width are often more important. Code needs a monospace fallback with comparable character widths.
Because local fonts differ by platform, use multiple tuned aliases when necessary:
font-family:
"Brand Serif",
"Brand Serif Fallback: Georgia",
"Brand Serif Fallback: Times New Roman",
Georgia,
"Times New Roman",
serif;Each alias should have its own @font-face rule and metrics. One adjustment cannot accurately normalize every possible local font.
Manual tuning workflow
When generated values need visual refinement, use this order:
- Adjust
size-adjustuntil apparent lowercase size and representative text width are close. - Adjust
ascent-overrideto align the upper edge and baseline relationship. - Adjust
descent-overrideto align descenders and the lower edge. - Adjust
line-gap-overrideonly if line boxes still differ. - Repeat with paragraphs, headings, buttons, numerals, punctuation, and all-caps labels.
Matching one sentence does not guarantee matching every line. Uppercase text, URLs, technical terms, German compounds, numerals, and punctuation can expose different width patterns.
Weights, italics, variable fonts, and synthesis
Do not assume that regular metrics apply to every weight. Static and variable fonts can change width and vertical metrics across the weight range. Verify 400, 500, 600, 700, and heavier values actually used by the interface.
Italic faces are not simply slanted regular faces. They can have different widths, ascenders, descenders, and overhangs. Give them separate fallback rules when they are important.
If a requested face is missing, the browser may synthesize it. For strict diagnostics or tightly controlled design systems, you can disable synthesis:
html {
font-synthesis: none;
}This does not create missing faces; it reveals the problem. Use it only when the design can supply every required weight and style or has an intentional fallback strategy.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsMultilingual text and missing glyphs
Metric tuning does not solve character coverage. A font may load successfully while lacking emoji, CJK characters, Arabic, Devanagari, Thai, mathematical symbols, currency signs, or rare Unicode characters. The browser can then select another font for only those characters.
A Latin-optimized fallback may therefore work well for English and fail for mixed-script content. Test Latin, Cyrillic, Arabic, Devanagari, Thai, CJK, and the actual languages your product serves. Language-specific fonts and unicode-range subsets may need separate metric strategies.
Capsize’s documentation notes that appropriate scaling can differ by language and Unicode subset because written-language character frequencies affect the result.
Line height and clipping
line-height: normal is derived from font metrics, so changing fonts can change line boxes even when your CSS is unchanged. An explicit line height makes layout more predictable, but incorrect overrides can still clip text.
Outdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchPC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11Test accents, capitals, and descenders at the largest sizes used by the page:
Á À Å Ç É Ñ Ö Ü Ý
g j p q y
Ångström déjà vu façadeCheck real content as well. A fallback that looks aligned in a short sample may clip a diacritic or wrap a production heading differently.
Verification checklist
- Inventory faces: record family, weight, style, width, variable axes, subsets, file formats, and loading method.
- Choose candidates: compare typography, platform availability, and language coverage.
- Generate metrics: use Capsize or Fontaine as a starting point.
- Keep aliases separate: place the adjusted fallback between the web font and generic families.
- Test loading states: block the web font, use a cold cache, throttle the connection, and simulate a failed request.
- Test viewports: compare narrow and wide layouts, especially responsive headings and navigation.
- Inspect sensitive components: test buttons, cards, forms, tables, dashboards, sticky headers, and text beside images.
- Measure results: compare line counts, element heights, font timing, layout-shift sources, and field data where available.
- Check accessibility: look for clipped diacritics, cramped lines, poor readability, and behavior under forced-font or download-restricted settings.
- Regenerate after changes: update values when the primary font, version, subset, weight, style, fallback order, language coverage, or type scale changes.
When not to tune a fallback
A system-font stack may be the better choice when the design tolerates platform variation and simplicity is more valuable than exact branding. Likewise, font-display: optional can be appropriate when the custom font is decorative and a stable system fallback is acceptable.
Do not optimize CLS at the expense of readable text. A fallback that prevents movement but clips accents, compresses lines, changes perceived weight, or performs poorly for multilingual users is not a successful solution.
Free tools Windows power users keep installed
One-click scans. No signup required.
Icon fonts deserve a separate decision. Prefer semantic SVG or another graphics approach; if an icon font fails, a text fallback can display a misleading letter or symbol. The body-text fallback recipe is not an accessible icon strategy.
Implementation summary
Use font-display to decide how the browser balances immediate text against a later swap. Choose a genuinely similar fallback, define it under a separate @font-face alias, and calculate size-adjust plus ascent, descent, and—if appropriate—line-gap overrides. Cover every important weight and style, account for missing glyphs and platform differences, then verify cold-cache and failure scenarios with real content.
The result will not be identical typography. It will be a more stable transition that keeps the interface readable while reducing unnecessary reflow.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
