웹페이지 글꼴의 원리와 HTML에서 폰트 바꾸는 법
Finipage 가이드 · HTML 파일을 코드 없이 고치는 편집기. Finipage 열기
글꼴을 바꿔 두었는데 내 노트북에서는 멀쩡하고 동료 컴퓨터에서는 밋밋한 기본 글꼴로 보이는 경우가 있습니다. 제목을 굵게 했더니 글자가 번진 것처럼 뭉개져 보이기도 합니다. 두 현상 모두 브라우저가 글꼴을 고르는 방식에서 나옵니다. 웹페이지는 글꼴을 품고 있지 않고 "이 글꼴로 보여 달라"고 요청만 합니다.
font-family는 명령이 아니라 희망 목록입니다
CSS에서 글꼴은 font-family로 정합니다.
body {
font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}브라우저는 이 목록을 왼쪽부터 읽어 실제로 찾을 수 있는 첫 글꼴을 씁니다. 프리텐다드를 불러오지 않았고 컴퓨터에도 설치돼 있지 않으면 Apple SD Gothic Neo(맥과 아이폰에 기본 탑재)를, 그것도 없으면 맑은 고딕(윈도우 기본 글꼴)을, 마지막으로 sans-serif를 씁니다. sans-serif는 특정 글꼴이 아니라 "이 기기의 기본 고딕 계열"을 뜻하는 일반 이름입니다. 이름에 띄어쓰기가 있으면 따옴표로 감싸고, 맨 끝의 일반 이름은 따옴표 없이 꼭 넣어 둡니다. 목록의 글꼴을 하나도 찾지 못하면 브라우저 기본 글꼴로 넘어가는데, 이것이 명조 계열인 경우가 많기 때문입니다.
"내 컴퓨터에서는 잘 보인다"의 원인이 여기 있습니다. 내 컴퓨터에 설치한 글꼴은 내 브라우저만 찾을 수 있고, 방문자 브라우저는 목록의 다음 글꼴로 넘어갑니다.
시스템 글꼴과 웹폰트
시스템 글꼴은 방문자 기기에 이미 깔린 글꼴입니다. 윈도우의 맑은 고딕, 애플 기기의 Apple SD Gothic Neo가 대표적입니다. 내려받을 것이 없어 빠르지만 기기마다 달라서 같은 페이지도 조금씩 다르게 보입니다.
웹폰트는 페이지와 함께 글꼴 파일을 내려받게 해서 누구에게나 같은 글꼴로 보이게 하는 방식입니다. 흔히 두 가지로 불러옵니다. 첫째는 글꼴 서비스가 주는 스타일 연결 줄입니다. 구글 폰트에서는 head에 붙여 넣을 다음과 같은 줄을 줍니다.
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&display=swap">wght@400;700은 보통(400)과 굵게(700) 두 굵기를 요청한다는 뜻입니다. display=swap은 웹폰트가 도착하기 전까지 글자를 숨기지 말고 대체 글꼴로 먼저 보여 준 뒤, 도착하면 바꿔 끼우라는 설정입니다. 그다음 CSS에서 font-family: "Noto Sans KR", sans-serif;처럼 이름을 적습니다.
둘째는 글꼴 제작 프로젝트가 직접 안내하는 CDN 주소입니다. 프리텐다드 공식 저장소에는 다음과 같은 jsDelivr 주소가 나와 있습니다.
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css">버전 번호는 바뀌므로 오래된 블로그 글 대신 프로젝트 페이지에서 최신 주소를 복사하십시오. 글꼴 파일을 HTML 옆에 두고 @font-face로 직접 연결하는 방법도 있습니다.
한글 웹폰트가 무거운 이유와 서브셋
영문 글꼴은 글자 수백 개면 충분합니다. 반면 유니코드에 정의된 완성형 한글 음절만 11,172자이고, 한글 글꼴은 보통 영문과 기호, 때로는 한자까지 함께 담습니다. 그래서 한글 글꼴 파일 하나가 영문 글꼴보다 몇 배에서 수십 배 크고, 수십 킬로바이트가 아니라 메가바이트 단위인 경우가 흔합니다. 느린 휴대폰 회선에서는 눈에 띄게 늦어지고, 굵기를 하나 더할 때마다 내려받을 파일도 늘어납니다.
해결책은 서브셋, 즉 페이지에 필요한 글자만 보내는 것입니다.
- 글자 범위로 쪼개기: 글꼴을 글자 범위별로 잘게 나눠 두고, 브라우저가 페이지에 실제로 나온 글자가 든 조각만 받게 합니다. 프리텐다드는 이 방식의
pretendard-dynamic-subset.min.css와 가변 글꼴판을 따로 제공합니다. - 정확한 글자만: 구글 폰트는
text=값에 적은 글자만 담은 글꼴을 돌려줍니다. 공식 문서는 파일 크기를 최대 90%까지 줄일 수 있다고 설명합니다. 로고나 제목 한 줄에는 알맞지만 내용이 바뀌는 본문에는 맞지 않습니다. - 굵기 줄이기: 굵기마다 따로 내려받으므로 400과 700 두 가지면 대부분의 페이지에 충분합니다.
한국어 페이지에서 가장 자주 만나는 웹폰트는 프리텐다드와 Noto Sans KR입니다. 프리텐다드는 GitHub에 공개된 오픈소스 고딕 글꼴로 아홉 가지 굵기와 가변 글꼴판이 있습니다. Noto Sans KR은 구글 Noto 글꼴 가족의 한국어판으로 구글 폰트에서 바로 불러올 수 있습니다.
무료로 받을 수 있다고 마음대로 써도 되는 것은 아닙니다
글꼴도 라이선스가 있는 소프트웨어입니다. 회사나 가게 페이지에 쓰기 전에 사용 조건을 확인하십시오.
- 프리텐다드는 SIL 오픈 폰트 라이선스(OFL)로 배포됩니다. 프로젝트 안내에 따르면 글꼴만 따로 판매하는 것을 제외한 상업적 사용, 수정, 재배포가 허용됩니다.
- Noto Sans KR의 바탕인 Noto Sans CJK도 공식 저장소의 라이선스 파일에 SIL Open Font License 1.1로 명시돼 있습니다.
- 구글 폰트는 수록 글꼴을 오픈소스로 안내합니다. 대부분 OFL이지만 Apache 등 다른 라이선스를 쓰는 글꼴도 있으니 글꼴마다 라이선스 항목을 열어 보십시오.
"무료 폰트 모음"에서 받은 글꼴은 더 조심해야 합니다. 개인 용도만 무료이거나, 웹 임베딩을 금지하거나, 기업이 자체 약관을 붙인 한글 글꼴도 있습니다. 라이선스 문서나 제작사 안내에서 상업적 사용, 웹사이트 사용, 수정·서브셋 허용 여부를 확인하고, 라이선스를 찾을 수 없다면 업무용 페이지에는 쓰지 마십시오.
굵기와 '가짜 굵게'
font-weight는 100부터 900까지의 값을 받고, normal은 400, bold는 700과 같습니다. 브라우저는 실제로 불러온 굵기만 보여 줄 수 있습니다. 400과 700만 불러온 상태에서 600을 요청하면 정해진 규칙에 따라 가까운 굵기를 고르는데, 이 경우 700으로 보입니다. 300을 요청하면 400으로 보입니다.
굵은 글꼴 자체가 아예 없는데 글자를 굵게 지정하면, 브라우저가 보통 굵기 글자를 덧칠해 굵게 흉내 내기도 합니다. 이것이 번진 듯 뭉개져 보이는 가짜 굵게(faux bold)이고, 획이 촘촘한 한글에서 특히 티가 납니다. MDN 문서도 중국어·일본어·한국어 글꼴 중에는 굵은 꼴과 기울임꼴이 없는 경우가 많다고 설명합니다. 해결 방법은 두 가지입니다.
- 쓰는 굵기를 실제로 불러옵니다. 예를 들어 구글 폰트 주소에
700을 추가합니다. - 또는
font-synthesis: none;으로 흉내 내기를 막습니다. 이 경우 글자는 보통 굵기로 남습니다.
한글 본문의 줄 간격과 자간
한글은 글자 덩어리가 높고 촘촘해서 영문보다 줄 간격을 넉넉히 주는 편이 읽기 좋습니다. 본문 line-height는 1.6~1.8 정도가 흔한 출발점이고, 제목은 1.3 안팎으로 좁혀도 됩니다. line-height: 1.7;처럼 단위 없이 적어야 글자 크기가 바뀌어도 비율이 유지됩니다.
letter-spacing(자간)은 큰 제목에서 -0.02em처럼 살짝 좁히는 사이트가 많습니다. 본문은 0이나 그에 가깝게 두십시오. 작은 한글을 좁히면 금방 읽기 어려워집니다. 한국어에 특히 쓸모 있는 속성이 하나 더 있습니다. word-break: keep-all;을 주면 한 단어 중간에서 줄이 바뀌지 않아 제목의 줄바꿈이 훨씬 자연스러워집니다.
내 파일에서 글꼴 바꾸기
글꼴 종류 자체를 바꾸려면 코드를 고쳐야 합니다. head에 글꼴 연결 줄을 넣고, <style> 블록이나 CSS 파일의 font-family 값을 바꿉니다. 이 작업은 메모장이나 VS Code가 알맞습니다. 그 줄들이 파일 어디에 있는지, 브라우저의 검사 도구로 해당 규칙을 찾는 방법은 HTML 파일 구조 읽는 법에 정리해 두었습니다.
나머지 절반은 Finipage로 할 수 있습니다. 제목이나 문단을 선택하면 오른쪽 속성 패널에서 글자 크기, 줄 간격(배수), 굵기(100~900), 정렬과 굵게·기울임·밑줄·취소선을 바꿀 수 있고, 문장 일부만 드래그해 고르면 그 부분에만 크기나 굵기가 적용됩니다. 다만 글꼴 종류를 고르는 칸은 없습니다. 메모장에서 글꼴 연결 줄과 font-family를 먼저 넣고, 편집기에서 데스크톱·모바일 폭을 오가며 크기와 간격을 다듬는 순서가 편합니다. 패널에서 600을 골라도 600 굵기를 불러오지 않았다면 700과 같아 보입니다.
글꼴을 바꾼 뒤에는 느린 글꼴 로딩과 좁은 줄 간격이 먼저 드러나는 휴대폰 화면에서 확인하기를 거쳐 보십시오.
내 파일로 바로 해 보려면 Finipage 편집기를 여세요. 브라우저에서 돌아가고 파일은 내 기기 밖으로 나가지 않습니다.