한글 웹폰트는 담아야 할 문자가 많아 파일 크기가 커지기 쉽습니다. CSS 한 줄을 넣는 일과 페이지가 빠르게 읽히는 일은 다릅니다. 어떤 글꼴 파일을 실제로 받는지, 글꼴이 오기 전에는 무슨 글자로 보이는지, 첫 화면에 필요한 요청이 무엇인지 살펴봐야 합니다. 이 사이트가 쓰는 방식은 여덟 가족 각각의 배포 저장소에서 버전을 고정한 분할 CSS를 연결하는 것입니다. 방문자의 환경에서는 브라우저 캐시와 실제 쓰인 글자에 따라 요청량이 달라집니다.
분할 CSS는 필요한 문자 범위만 요청하게 합니다
하다 타입의 분할 WOFF2는 한글 음절을 최대 128자씩 나눈 조각과 다른 문자 범위로 만들어집니다. CSS의 unicode-range 규칙은 브라우저가 페이지에 쓰인 글자가 포함된 조각을 골라 받게 합니다. 전체 파일 CSS를 연결하면 필요한 글자가 몇 개뿐이어도 큰 파일이 요청될 수 있습니다. 분할 방식은 짧은 페이지에서 특히 이득이 날 수 있지만, 문자가 매우 많거나 여러 굵기를 한꺼번에 쓰는 페이지에서는 조각 요청도 늘어납니다. 그래서 분할을 썼다는 이유만으로 빠르다고 단정하지 않고 네트워크 기록을 봅니다.
가족 페이지의 ‘웹에 올리기’에는 전체 파일 CSS와 -subset.css 분할 주소가 함께 있습니다. 이 사이트의 HTML은 가족별 분할 CSS를 버전이 고정된 CDN 주소에서 연결합니다. 다음 예시는 하다 산스의 분할 CSS입니다. 버전은 배포 때 바뀌므로 실제 적용 전에는 가족 페이지의 최신 코드를 복사하세요.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hada0127/[email protected]/css/hada-sans-subset.css">처음에는 페이지가 실제로 쓰는 가족만 연결합니다. 한 가족의 400과 700이 필요하다면 CSS에서 두 굵기만 지정하고, 쓰지 않는 장식용 가족의 연결은 빼 봅니다. 글꼴 파일은 브라우저가 CSS를 해석하고 실제 글자를 찾은 뒤 요청하므로, 네트워크 창에 보이는 요청과 기대한 글자가 일치하는지 확인해야 합니다.
font-display는 기다리는 동안의 모습을 정합니다
하다 타입 배포 CSS에는 font-display: swap이 들어 있습니다. 글꼴 파일이 아직 도착하지 않았을 때 대체 글꼴로 먼저 글자를 보여 주고, 준비되면 웹폰트로 바꿉니다. 그래서 첫 화면에서 글자가 비어 있기보다 읽을 수 있는 문장이 보이지만, 글자 폭이 달라 줄바꿈이 바뀔 수 있습니다. 대체 글꼴은 본문과 비슷한 성격으로 고르고, 로딩 전후의 제목·버튼·표를 직접 비교합니다. 글자가 바뀌며 버튼이 두 줄이 되거나 카드 높이가 달라지면 처음 화면의 흔들림이 커집니다.
CSS의 font-family 뒤에 시스템 계열을 적어 두면 파일을 못 받을 때도 글자를 그릴 수 있습니다. 하다 산스라면 system-ui, sans-serif가 한 예입니다. 이 사이트의 폰트가 모든 방문자에게 항상 같은 시간에 도착한다는 가정은 피해야 합니다. 느린 연결과 캐시가 없는 첫 방문을 개발자도구에서 시험하고, 이미 캐시된 두 번째 방문도 따로 봅니다.
preload는 필요한 파일을 알 때만 씁니다
preload는 브라우저에 특정 파일을 일찍 요청하라고 알려 줍니다. 그러나 분할 CSS를 사용할 때는 페이지에 나타날 문자에 따라 필요한 WOFF2 조각이 달라집니다. 모든 조각을 미리 불러오면 분할의 이득을 잃고, 쓰지 않는 파일을 먼저 받아 중요한 요청을 늦출 수 있습니다. 이 사이트는 가족별 분할 CSS를 연결하지만 폰트 파일 전부를 preload하지 않습니다. 처음 화면에 반드시 나오는 특정 조각을 알고 있고 실제 네트워크 측정에서 병목이 확인됐을 때만 그 파일의 preload를 검토하는 편이 좋습니다.
직접 호스팅하는 WOFF2라면 preload 경로와 CSS가 가리키는 파일 경로가 정확히 같아야 합니다. 도메인이 다르면 교차 출처 설정도 맞아야 중복 요청을 피할 수 있습니다. 무엇보다 우선순위를 높인 요청이 실제 첫 화면에 쓰이는지 확인하세요. 파일 이름만 보고 전체 글꼴과 분할 글꼴을 동시에 preload하는 실수를 조심합니다.
분할 파일을 직접 올릴 때는 CSS와 WOFF2의 상대 경로를 함께 옮겨야 합니다. CSS만 새 위치에 놓고 파일 경로를 고치지 않으면 브라우저는 규칙을 읽어도 글꼴 파일을 받지 못합니다. 배포 묶음의 사용 안내를 확인하고, 개발자도구에서 실패한 요청의 주소를 먼저 보세요. 캐시된 예전 CSS 때문에 새 파일이 보이지 않는 경우도 있으므로 버전을 바꾼 뒤에는 새로운 주소로 요청하는지 확인합니다.
브라우저에서 확인하는 순서
- 개발자도구 네트워크 창을 열고 캐시가 없는 첫 방문을 다시 불러옵니다.
- CSS 요청과 WOFF2 요청을 나누어 보고, 쓰지 않는 가족이나 굵기 파일이 있는지 확인합니다.
- 본문과 제목이 처음 나타날 때 대체 글꼴에서 웹폰트로 바뀌는 모습을 봅니다. 줄바꿈, 카드 높이, 버튼 폭을 함께 살핍니다.
- 같은 페이지를 다시 열어 캐시가 있을 때 요청 수가 어떻게 달라지는지 봅니다.
- 실제 원고가 긴 페이지와 짧은 페이지를 각각 시험합니다. 두 페이지는 필요한 한글 조각 수가 다를 수 있습니다.
배포 주소의 버전을 고정하면 새 파일이 나왔을 때 의도적으로 URL을 바꿔 갱신할 수 있습니다. 하다 타입은 각 가족의 CSS 주소에 현재 버전을 넣습니다. 처음 연결하는 방법은 웹폰트 적용 안내를, 실제 배포 변경은 변경 기록을 참고하세요. 속도를 판단할 때는 한 번 측정한 숫자보다 실제 페이지의 요청과 화면 변화를 함께 읽는 편이 정확합니다.