웹 글꼴을 불러오고 fallback·성능 전략을 이해합니다.
@font-face는 글꼴 파일과 family 이름, weight, style을 등록합니다. woff2를 우선하고 font-display로 로딩 중 텍스트 표시 방식을 정하며 적절한 시스템 fallback을 둡니다.
@font-face가 DemoFallback이라는 이름을 등록하는데 src가 local(Arial)이라 파일을 내려받지 않고 기기에 설치된 Arial을 찾아 씁니다. 문단의 CSS 같은 영문은 Arial로 그려지지만 Arial에는 한글 글자가 없어 한글은 다음 후보인 system-ui에서 가져오고, Arial이 없는 기기라면 문단 전체가 system-ui로 표시됩니다.
unicode-range로 @font-face마다 담당할 문자 범위를 적어 두면 브라우저는 페이지에 실제로 나온 글자가 속한 파일만 내려받습니다. 한글 웹폰트를 수십 개의 작은 파일로 나눠 제공하는 서브셋 방식이 이 기능을 이용하며, 같은 family 이름으로 여러 @font-face를 선언해 하나의 글꼴처럼 씁니다.
한글 전체 굵기를 모두 내려받으면 초기 로딩 용량이 매우 커질 수 있습니다.
직접 바꿔보세요fallback 순서를 바꾸고 사용 가능한 글꼴을 비교하세요.