font-family 순서 규칙, 폴백 폰트 확인하기
CSS로 글자를 꾸밀 때 font-family에 폰트 이름을 하나만 안 쓰고 쉼표로 여러 개 나열하는 코드를 자주 봅니다. 왜 하나로 안 끝내고 여러 개를 줄줄이 적는지, 그 순서가 실제로 무슨 역할을 하는지 궁금해질 때가 있습니다. 이 글은 그 폴백(fallback) 구조가 어떻게 작동하는지, 어떤 순서로 적어야 안전한지를 정리합니다.
요약 ① font-family는 쉼표로 나열한 순서대로 브라우저가 하나씩 확인하며, 방문자 기기에 설치된 첫 번째 이름을 그대로 씁니다. ② 지정한 이름이 하나도 없으면 맨 마지막 항목인 제네릭 글꼴군(sans-serif 등)으로 넘어가는데, 이건 모든 브라우저가 기본값을 보장하는 안전망입니다. ③ 이 도구에 있는 15개는 대부분의 OS에 이미 설치돼 있어 파일 다운로드 없이 그대로 쓸 수 있는 웹 안전 폰트입니다.
font-family에 이름을 여러 개 나열하는 이유
font-family: Arial, Helvetica, sans-serif;처럼 쓰는 코드를 본 적 있을 겁니다. 이건 오타나 습관이 아니라 정해진 문법입니다.
브라우저는 이 목록을 왼쪽부터 순서대로 읽습니다. 방문자 기기에 실제로 설치돼 있는 첫 번째 이름을 찾으면, 그 즉시 그 폰트로 렌더링하고 나머지는 확인하지 않습니다.
즉 "Arial"이 없는 기기라면 "Helvetica"를 찾고, 그것도 없으면 마지막 "sans-serif"로 넘어갑니다. 하나의 font-family 값 안에 우선순위가 정해진 후보 목록이 들어 있는 셈입니다.
맨 마지막 항목이 제네릭 글꼴군이어야 하는 이유
목록의 마지막 자리에는 특정 폰트 이름이 아니라 serif·sans-serif·monospace·cursive 같은 '제네릭(generic) 글꼴군' 키워드를 넣는 게 정석입니다.
이 키워드들은 실제 폰트 이름이 아니라 CSS 명세가 정의한 분류입니다. 모든 브라우저는 이 분류마다 기본으로 보여줄 폰트를 반드시 지정해 두고 있습니다.
그래서 앞에 나열한 구체적인 이름이 전부 그 기기에 없더라도, 마지막 제네릭 글꼴군만큼은 항상 매칭에 성공합니다. 글자가 아예 깨지거나 렌더링에 실패하는 상황 자체를 막아주는 최종 안전망입니다.
반대로 목록의 마지막을 특정 폰트 이름으로 끝내면 이 안전망이 사라집니다. 나열한 이름이 전부 없는 기기에서는 브라우저가 임의로 정한 기본 글꼴로 대체되어, 어떤 모양이 나올지 예측할 수 없습니다.
이렇게 확인합니다 — 내 화면에서 실제로 쓰이는 폰트
가장 확실한 방법은 자신의 운영체제가 어떤 폰트를 실제로 갖고 있는지 직접 확인하는 것입니다. Windows는 '설정 → 개인 설정 → 글꼴'에서, Mac은 기본 앱 'Font Book'에서 설치된 폰트 목록을 볼 수 있습니다.
여기서 font-family에 적은 이름을 하나씩 그 목록과 대조해 보면, 내 기기에서는 몇 번째 후보가 실제로 선택될지 예측할 수 있습니다. 목록에 없는 이름은 자동으로 건너뛰어집니다.
브라우저 개발자도구의 요소 검사로도 font-family에 적어둔 순서 전체는 보이지만, 그중 어떤 이름이 실제로 선택돼 그려졌는지까지는 이 화면만으로 확정하기 어렵습니다. 그래서 설치 폰트 목록과 대조하는 절차가 필요합니다.
저희 도구로 확인하기. 15개 웹 안전 폰트가 실제로 어떤 모양인지, 같은 문장을 직접 입력해 한 화면에서 비교하면 이 대조 작업이 훨씬 빨라집니다.
무료 · 가입 불필요 · 15종 웹 안전 폰트 실시간 비교
카드마다 하단에 실제 font-family 값이 그대로 적혀 있어, 마음에 드는 폰트를 고른 뒤 그 줄을 그대로 복사해 코드에 붙여 넣을 수 있습니다.
자주 막히는 지점
표로 정리합니다.
| 상황 | 결과 | 이유 |
|---|---|---|
| 목록 마지막이 특정 폰트 이름 | 안전망 없이 임의 대체 | 제네릭 글꼴군이 빠짐 |
| 공백 포함 이름에 따옴표 누락 (예: Trebuchet MS) | 다음 폴백으로 조용히 넘어감 | 공백 기준으로 별개 단어 처리 |
| 폰트 이름 오타 | 에러 없이 다음 순번 적용 | 브라우저가 못 찾은 이름은 그냥 건너뜀 |
| 이름 하나만 지정 | 그 폰트가 없는 기기에서 브라우저 기본값으로 대체 | 대체 후보가 없음 |
정리
font-family는 순서가 있는 폴백 목록입니다. 앞쪽 이름이 없으면 다음 이름으로, 그마저 없으면 제네릭 글꼴군으로 넘어갑니다.
목록 마지막은 항상 serif·sans-serif·monospace 같은 제네릭 글꼴군으로 끝내야 안전망이 생깁니다. 이 웹 안전 폰트 15종은 대부분 OS에 이미 있어 그 앞자리 후보로 넣기 좋습니다.
실제로 어떤 모양이 나오는지는 이름만 봐서는 가늠하기 어렵습니다. 직접 비교해 보고 코드에 넣을 순서를 정하는 편이 확실합니다.
무료 · 가입 불필요 · 15종 웹 안전 폰트 실시간 비교
자주 묻는 질문
font-family에 폰트를 몇 개까지 나열해도 되나요?
개수 제한은 없습니다. 다만 원하는 폰트 1~2개 뒤에 비슷한 대체 폰트 1개, 마지막에 제네릭 글꼴군 하나를 붙이는 정도로 충분합니다. 아무리 길게 나열해도 실제로는 처음 매칭되는 이름에서 멈춥니다.
이 15개 폰트는 정말 모든 기기에서 똑같이 보이나요?
거의 모든 Windows·Mac 환경에 기본 설치돼 있어 별도 다운로드 없이 나타나지만, 운영체제 버전이나 폰트 관리 설정에 따라 미세한 렌더링 차이는 있을 수 있습니다. 완전히 새로운 디자인 폰트가 필요하다면 웹폰트(파일 다운로드 방식)를 별도로 검토해야 합니다.
font-family 순서를 바꾸면 이미 배포한 사이트에도 바로 적용되나요?
네, font-family는 서버가 아니라 방문자의 브라우저가 그 순간 해석하는 값입니다. CSS 파일을 수정해 배포하면 다음에 그 페이지를 불러오는 순간부터 새 순서로 다시 판단합니다.