디자인 아틀라스
EN
Aa 타이포그래피

폰트 폴백

Font fallback

`font-family`에 나열한 폰트를 앞에서부터 순서대로 시도하다가, 그 글자를 실제로 갖고 있는 첫 번째 폰트를 쓰는 브라우저의 동작.

다른 이름: 폴백 스택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);
});

`font-family: "Pretendard", "Apple SD Gothic Neo", sans-serif`처럼 여러 폰트를 쉼표로 나열하면, 브라우저는 첫 폰트가 설치돼 있지 않거나 특정 글자(이모지, 특수 기호, 다른 언어 문자)를 갖고 있지 않을 때 다음 폰트로 넘어갑니다. 이 전환은 단어 단위가 아니라 **글자(정확히는 글리프) 단위**로 일어날 수 있어서, 한 단어 안에서도 지원하는 부분은 첫 폰트로, 지원하지 않는 부분(예: 이모지)은 다음 폴백 폰트로 렌더링되는 일이 흔합니다.

스택의 마지막 항목은 보통 `serif`·`sans-serif`·`monospace` 같은 제네릭 키워드로, 앞의 구체적인 폰트가 전부 실패해도 OS가 반드시 갖고 있는 기본 폰트로 떨어지게 하는 안전망입니다. 이 사이트처럼 외부 폰트를 아예 안 불러오는 경우, 스택 전체가 사실상 "이 운영체제에 뭐가 깔려 있는지"에 대한 추측이 됩니다.

JS의 `document.fonts.check('16px "폰트이름"')`으로 특정 폰트가 실제로 이 브라우저·OS에서 사용 가능한지(설치돼 있거나 `@font-face`로 로드됐는지) 확인할 수 있습니다 — 폴백 스택을 "이럴 것이다"로 짐작하는 대신, 이 방법으로 실제 값을 확인해 스택을 설계하는 게 안전합니다. 데모는 이 API로 흔한 한글·영문 시스템 폰트 몇 개가 지금 이 환경에서 실제로 감지되는지 보여줍니다.

언제 쓰나

한/영이 섞이는 사이트에서는 한글 전용 폰트(예: Apple SD Gothic Neo, Malgun Gothic)를 영문 폰트보다 먼저 두거나, 언어별로 다른 스택을 쓰세요. 이모지는 보통 스택 끝에 별도로 이모지 폰트를 명시하지 않아도 OS가 알아서 처리합니다.