웹폰트는 방문자의 컴퓨터에 글꼴을 설치하라고 요구하지 않습니다. 페이지가 열릴 때 브라우저가 글꼴 파일을 받아 화면에 그립니다. 내 컴퓨터에서만 글꼴이 보인다면 설치된 글꼴을 보고 있는 것일 수 있습니다. 다른 기기에서도 같은 모양으로 보이게 하려면 사이트에 웹폰트를 연결해야 합니다.
1. 글꼴 주소를 연결합니다
하다 타입의 하다 산스 웹폰트 안내에 있는 연결 코드를 복사할 수 있습니다. 아래 주소는 배포 버전을 고정한 하다 산스용 글꼴 정의 파일입니다. 사이트 전체에 필요한 가족이 여러 개라면 같은 주소의 css/hada-type.css를 쓸 수도 있습니다. 한 가족만 쓸 때는 가족별 파일을 고르세요.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hada0127/[email protected]/css/hada-sans.css">이 줄을 사이트의 HTML에서 <head>와 </head> 사이에 넣고 저장합니다. 글을 쓰는 칸에 붙이면 그 글에서만 문자로 보이거나 적용되지 않을 수 있습니다. 사이트 설정에서 HTML의 머리 부분을 편집할 수 있는지 먼저 확인하세요.
- 티스토리: 스킨의 HTML을 편집할 수 있다면
<head>안에 넣습니다. 스킨을 바꾸기 전에는 편집한 코드를 따로 보관하세요. - 워드프레스: 테마가 허용하는 헤더 삽입 기능이나 헤더 코드를 넣는 확장 기능을 이용합니다. 테마 파일을 직접 관리한다면
header.php의<head>안에도 넣을 수 있습니다. 테마마다 편집 가능한 위치가 다릅니다. - 카페24·아임웹: 사이트 설정에 HTML 머리 부분을 편집하는 곳이 있는지 살펴보세요. 편집 권한이나 요금제에 따라 넣을 수 있는 위치가 다를 수 있습니다.
노션과 구글 사이트도구는 일반적인 본문 편집만으로 페이지 전체의 글꼴을 이 주소로 바꾸기 어렵습니다. 구글 사이트도구의 코드 삽입은 삽입한 영역에 적용되므로 사이트의 모든 글자에 적용하는 방법과 다릅니다. 글꼴 모양을 꼭 유지해야 하는 한 장짜리 자료라면 글자를 이미지나 PDF로 만들어 올리는 방법도 있습니다.
2. 어느 글자에 쓸지 정합니다
주소를 연결하는 것만으로 기존 글꼴이 자동으로 바뀌지는 않습니다. 사이트의 추가 CSS 입력란에 아래 한 줄을 넣으면 본문 전체에 하다 산스를 요청합니다. 뒤의 sans-serif는 파일을 받을 수 없을 때 쓸 기본 글꼴입니다.
body { font-family: "Hada Sans", sans-serif; }제목만 바꾸려면 body 대신 h1, h2, h3를 적습니다. 본문 문단만 바꾸려면 p를 적을 수 있지만, 메뉴나 버튼에는 적용되지 않습니다. 사이트가 이미 더 구체적인 글꼴 규칙을 쓰고 있다면 일부 글자는 그대로 남을 수 있습니다. 그럴 때는 바뀌지 않은 글자를 검사해 해당 요소의 규칙을 찾으세요.
h1, h2, h3 { font-family: "Hada Sans", sans-serif; font-weight: 700; }
p { font-family: "Hada Sans", sans-serif; font-weight: 400; }숫자 400은 보통 굵기, 700은 굵은 글씨입니다. 하다 산스에는 100부터 900까지 100 간격의 굵기가 있지만, 처음에는 400과 700 정도만 정해도 충분합니다. 사이트의 기존 제목 굵기가 달라 보이면 그 요소에 설정된 font-weight를 함께 확인하세요.
3. 처음 뜰 때의 모습을 확인합니다
첫 방문 때 글자가 잠시 다른 모양으로 보이다 바뀔 수 있습니다. 웹폰트 파일을 받는 동안 대신 쓸 글꼴을 먼저 보여 주기 때문입니다. 하다 타입의 배포 CSS에는 font-display: swap이 들어 있습니다. 브라우저는 화면에 필요한 글꼴 파일을 요청하지만, 사용하지 않는 가족까지 연결하면 확인할 파일과 규칙이 늘어납니다.
한글 글꼴은 담아야 할 글자가 많아 파일이 커질 수 있습니다. 처음에는 쓰는 가족의 CSS만 연결하고, 실제 화면에 필요한 굵기만 지정하세요. 다른 가족의 CSS를 같은 페이지에 여러 개 붙였다면 쓰지 않는 연결부터 지워 보세요. 방문자의 연결 상태와 브라우저 캐시에 따라 첫 화면에 걸리는 시간은 달라집니다.
4. 내 서버에 올리고 싶다면
외부 주소 대신 내 사이트에서 파일을 제공하려면 가족 페이지에서 WOFF2 압축 파일을 받으세요. 압축을 풀면 글꼴 파일과 WEBFONT.css, WEBFONT-USAGE.txt가 있습니다. 글꼴 파일을 사이트에서 공개할 수 있는 폴더에 올리고, CSS의 url(...) 경로를 업로드한 위치에 맞게 고칩니다. CSS 파일도 올린 뒤 그 주소를 앞의 <link>에 적습니다.
예를 들어 글꼴 파일을 /fonts/에 올렸다면 CSS의 파일 주소가 그 경로를 가리켜야 합니다. 관리자 화면에 파일 업로드만 있고 CSS 파일을 수정할 곳이 없다면 직접 호스팅을 적용하기 어렵습니다. 파일 이름의 대소문자도 실제 업로드한 이름과 같아야 합니다.
5. 적용됐는지 10초 안에 확인합니다
- 바꾼 페이지를 새로 열고 글자 위에서 브라우저 개발자도구의 요소 검사를 엽니다.
- 계산된 스타일에서
font-family를 찾아Hada Sans가 지정됐는지 봅니다. 이 값은 지정된 목록이므로 실제로 그린 글꼴을 보여 주는 브라우저 항목도 함께 확인하세요. - 안 보인다면 CSS 주소를 새 탭에서 열어 내용이 나오는지, 글꼴 파일 요청이 실패했는지, 해당 글자에 다른 규칙이 덮였는지 차례로 살펴봅니다.
마지막으로 글꼴을 설치하지 않은 다른 기기에서도 같은 페이지를 열어 보세요. 이 확인까지 해야 내 컴퓨터에 설치된 글꼴만 우연히 보인 상황을 걸러낼 수 있습니다.