【전 3패턴 정리】Webflow에 폰트를 추가하는 방법

웹폰트

웹폰트란 어떤 기기에서 봐도 문자 윤곽이 깨끗하고 같은 디자인으로 표시되는 웹사이트용 폰트입니다. 문자 검색이 가능해 SEO에 강하고, 갱신·운영 시 문자 수정도 간단합니다.

이번에는 이런 궁금증에 답합니다.

✓이 글의 내용

• Webflow에 폰트를 추가하는 방법【전 3패턴】
• 가장 간단하게 폰트를 추가하는 방법
• 추가하면 좋은 추천 폰트 소개
  

이 글을 쓰는 저는 Webflow로 웹사이트를 제작하며 월 30만 엔 정도의 수익을 올리고 있습니다. 실제로 모든 방법으로 폰트 추가를 해 봤습니다.

Webflow에 Google 폰트를 추가하는 방법【가장 간단】

풀다운에서 선택하기만 하면 추가할 수 있는 가장 간단한 방법입니다.

• ①에서 추가할 폰트를 선택
• ②추가한 폰트가 표시됩니다

Google 폰트는 사용하기 편한 “웹폰트”입니다. Noto Sans 등 일반적인 폰트를 손쉽게 추가할 수 있습니다.

웹폰트란?

웹폰트의 장점
1. SEO에 강하다(문자 검색이 가능)
2. 갱신·운영 시 문자 수정이 간단
3. 어떤 기기에서 봐도 문자 윤곽이 깨끗
4. 어떤 기기에서 봐도 같은 디자인으로 표시
5. 문자 디자인의 차별화 가능
6. PC용·스마트폰용 문자 이미지를 따로 만들 필요 없음

기기마다 표시가 달라지는 것은 여러모로 불편하므로 웹폰트 사용이 최선의 선택일 것입니다.

Webflow에 Adobe 폰트를 추가하는 방법【3단계】

Webflow에서 Adobe 폰트를 사용하려면 다음 3단계가 필요합니다.

• 【순서 1】API 토큰 설정
• 【순서 2】추가할 폰트 선택
• 【순서 3】Webflow에서 저장

전체 약 5분 정도의 작업입니다.

Adobe 폰트를 전부 사용하려면 결제가 필요합니다. 무료로 쓸 수 있는 폰트도 있으므로 이번에는 무료 폰트를 기준으로 설정합니다. ※유료판도 추가 방법은 같습니다.

【순서 1】API 토큰 설정

먼저 API 토큰을 취득해 Webflow에 붙여넣읍시다.

• ①Adobe Fonts account page에서 Adobe에 로그인
• ②로그인 후 오른쪽 위 계정에서 API 토큰 페이지 열기
• ③“새 API 토큰 만들기”를 클릭해 토큰 생성
• Webflow의 Adobe 폰트 칸에 붙여넣기

【순서 2】추가할 폰트 선택

①“Creative Cloud에서 이용 가능한 폰트 표시” 체크를 해제하면 무료 폰트만 표시됩니다.
②</> 마크가 붙은 폰트가 사용 가능한 폰트입니다.

• ②</> 클릭
• 웹 프로젝트 파일을 생성·저장
• 추가할 폰트는 전부 같은 파일에 추가

“이 폰트를 웹 페이지에서 쓰려면 코드를 head 태그에 복사하세요”라고 표시되지만, Webflow는 노코드이므로 무시하고 종료. Webflow의 폰트 화면으로 돌아갑시다.

【순서 3】Webflow에서 저장

추가한 파일과 폰트가 표시되므로 선택해 저장합니다. 이것으로 Adobe 폰트 추가 완료입니다.

※표시되지 않으면 페이지를 새로고침해 보세요.
※저장하지 않으면 반영되지 않으니 저장을 잊지 마세요!

【주의】폰트가 반영되지 않는 경우

반영에 시간이 걸리는 경우가 있습니다. 폰트 수가 많으면 더 걸립니다. 통신이 느리면 20분 정도 걸릴 수도 있으니 초조해하지 말고 기다립시다.

Webflow에 커스텀 폰트를 추가하는 방법【2MB 이하로 압축→추가】

Webflow에서 커스텀 폰트를 쓰려면 2MB 이하의 폰트 파일을 업로드해야 합니다. 대부분의 경우 폰트 압축이 필요합니다.

• 【순서 1】파일을 압축하는 툴 다운로드
• 【순서 2】폰트 축소
• 【순서 3】WOFF로 변환
• 【순서 4】Webflow에 추가

【순서 1】압축 툴 다운로드

한자·가나가 포함된 일본어 폰트는 파일이 커서 서브셋(사용 문자만 추출)이 필수입니다. 원문에서는 일본의 무료 툴 “서브셋 폰트 메이커”와 “WOFF 컨버터”(모두 무사시 시스템 제작)를 사용합니다. 한국어 폰트도 같은 원리로, 사용할 한글 음절만 추출하는 서브셋 툴을 쓰면 됩니다.

• 무사시 시스템: 서브셋 폰트 메이커
• 무사시 시스템: WOFF 컨버터
• 커맨드라인을 쓴다면 fonttools의 pyftsubset(서브셋)＋sfnt2woff-zopfli(WOFF 변환)로 같은 일을 할 수 있습니다

Mac용은 32bit/64bit 두 가지가 있으니 맞는 쪽을 받으세요. “2006년경에 나온 Intel Core Duo 이후는 전부 64비트”이므로 최근 Mac이라면 64bit입니다.

【순서 2】폰트 압축

서브셋 툴로 사용할 문자만 담은 작은 폰트를 만듭니다. ①축소할 폰트 선택 ②저장 위치 설정 ③담을 문자 입력 — 한국어라면 KS X 1001 완성형 2,350자＋영숫자＋기호가 기준이고, 일본어 폰트라면 원문이 안내하는 제1수준 한자＋기호＋로마자＋가나 목록을 그대로 붙여넣으면 됩니다(＋자주 쓰는 특수 문자) ④파일명은 반드시 반각 영숫자로(특수 문자가 있으면 앱이 종료됩니다).

【순서 3】WOFF로 변환

변환 툴로 파일을 WOFF로 바꿉니다. WOFF2가 가장 가볍지만 대응 플랫폼이 적으므로 용도에 맞게 만듭시다. 체크박스에 표시해 WOFF2를 만들면 되고, 그 밖의 설정은 바꿀 필요가 없습니다.

【순서 4】Webflow에 추가

경량화한 파일이 완성되면 Webflow에 업로드합니다. 업로드 시 굵기를 고를 수 있지만 경량화한 파일에는 원래 굵기 정보가 없으므로 반영되지 않습니다. 서브셋 시의 굵기를 골라 이름을 붙입시다. 굵기가 다른 파일을 2개 따로 업로드하면 둘 다 사용할 수 있습니다.

정리: Webflow에 폰트를 추가한다면 Google 폰트 추천

• Google 폰트는 선택만 하면 되므로 1분 만에 끝나는 초간단
• Adobe 폰트는 API 토큰만 설정하면 나머지는 Adobe에서 폰트를 고르기만
• 커스텀 폰트는 폰트 축소만 되면 업로드 가능. 서브셋 툴과 WOFF 변환 툴로 축소

웹폰트 추가로 사이트가 무거워질까 걱정된다면 속도 체커로 확인해 봅시다.

어쨌든 Webflow 안에서 완결하려면 웹폰트 사용이 가장 좋습니다. 폰트로 고민된다면 Google 폰트부터 정합시다. Noto Sans 계열은 사용하기 쉬워 인기입니다!