한 줄 요약
글꼴은 사이트의 목소리입니다. font-family로 원하는 글꼴을 지정하고, 그 글꼴이 없을 때를 대비해 대체 글꼴을 순서대로 적어 둡니다.
비유로 이해하기
같은 문장이라도 아나운서가 읽을 때와 친구가 말할 때 느낌이 다릅니다. 글꼴도 똑같아요. 고딕은 또렷하고 현대적인 목소리, 명조는 차분하고 문학적인 목소리입니다.
그런데 방문자의 컴퓨터에 그 글꼴이 없다면? 그래서 font-family에는 “1순위가 없으면 2순위, 그것도 없으면 3순위”처럼 대체 글꼴을 줄줄이 적어 둡니다. 마지막에는 sans-serif(고딕 계열) 같은 큰 분류를 적어 최소한의 모양을 지킵니다.
비교해 보기
- 시스템 글꼴: 방문자 기기에 이미 있는 글꼴. 빠르지만 기기마다 모양이 다릅니다(맥은 애플 산돌고딕, 윈도우는 맑은 고딕).
- 웹폰트: 사이트가 글꼴 파일을 함께 보내 줍니다. 어느 기기에서나 같은 모양이지만, 파일을 내려받는 시간이 생깁니다.
- 홈페이지 독립학교는 한글 웹폰트 Pretendard를 쓰고, 혹시 못 불러오면 애플 산돌고딕, 맑은 고딕 순으로 대신 보여 줍니다.
직접 실행해 보기
세 문장이 각각 Pretendard, 명조(serif), 손글씨(cursive) 계열로 적혀 있습니다. 세 번째 줄의 글꼴 이름을 "Nanum Pen Script"처럼 없는 이름으로 바꿔 보세요. 대체 글꼴로 넘어가는 것을 볼 수 있어요.
GenerateBlocks에서는
GeneratePress에서는 사용자 정의하기의 타이포그래피 메뉴에서 본문과 제목 글꼴을 한 번에 정합니다. GenerateBlocks 블록에서는 글꼴을 따로 바꾸지 않고 사이트 기본값을 따르게 두는 것이 일관성을 지키는 가장 쉬운 방법입니다.
참고: MDN: font-family · Pretendard (GitHub) · web.dev: Text and typography