Design Atlas
한국어
Aa Typography

Font fallback

폰트 폴백

The browser's behavior of trying each font listed in `font-family` in order and rendering with the first one that actually has a glyph for the character.

Also known as: 폴백 스택Font stack
···
html
<div class="stage" id="stage"></div>
css
#stage{display:grid;gap:4px;width:min(92%,340px)}
.row{display:flex;align-items:center;gap:8px;padding:5px 10px;border-radius:6px;font:11px ui-monospace,Menlo,monospace}
.row .dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--line)}
.row.yes .dot{background:var(--accent-3)}
.row.no .dot{background:var(--accent-2);opacity:.5}
.row .name{color:var(--fg);flex:1}
.row .state{color:var(--muted)}
js
const candidates = ['Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans KR', 'Segoe UI', 'Helvetica Neue', 'Arial'];
const stage = document.getElementById('stage');
candidates.forEach(function(name){
  let available = false;
  try { available = document.fonts.check('16px "' + name + '"'); } catch(e) {}
  const row = document.createElement('div');
  row.className = 'row ' + (available ? 'yes' : 'no');
  const dot = document.createElement('span');
  dot.className = 'dot';
  const label = document.createElement('span');
  label.className = 'name';
  label.textContent = name;
  const state = document.createElement('span');
  state.className = 'state';
  state.textContent = available ? '감지됨' : '없음';
  row.appendChild(dot); row.appendChild(label); row.appendChild(state);
  stage.appendChild(row);
});

List several fonts with `font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif`, and the browser moves to the next one whenever the first is unavailable or lacks a glyph for a given character (an emoji, a special symbol, a different script). This substitution can happen at the individual glyph level, not just per word — so a single word can render partly in the first font and partly in a fallback, if only part of it (say, an emoji) is missing from the first.

The stack's last entry is usually a generic keyword — `serif`, `sans-serif`, `monospace` — a safety net that guarantees a fallback the OS is required to have, even if every named font before it fails. On a site like this one that loads no external fonts at all, the entire stack is effectively a guess about what's installed on the visitor's OS.

`document.fonts.check('16px "Font Name"')` in JS can confirm whether a specific font is actually usable in this browser and OS (installed, or loaded via `@font-face`) — a way to design a fallback stack from measured fact rather than assumption. The demo uses this API to check, live, whether a handful of common Korean and English system fonts are actually detected in the current environment.

When to use

On sites mixing Korean and English, put a Korean-capable font (Apple SD Gothic Neo, Malgun Gothic) ahead of an English-only one, or use a different stack per language. Emoji are usually handled automatically by the OS without needing to name an emoji font explicitly.