※이 글의 순서와 화면은 2021년 시점의 것입니다. Webflow의 현행 UI에서는 명칭과 배치가 달라졌을 수 있습니다.
이번에는 이런 의문에 답해 나가겠습니다.
✓이 글의 내용
- Webflow에 폰트를 추가하는 방법【전 3가지 패턴】
- 가장 간단하게 Webflow에 폰트를 추가하는 방법
- Webflow에 추가하면 좋은 추천 폰트 소개
이 글을 쓰는 저는 Webflow로 웹사이트 제작을 하며
월 30만 엔 정도의 수익을 올리고 있습니다.
또 이 블로그도 Webflow로 만들어 관리하고 있으며,
실제로 모든 방법으로 폰트 추가를 해 보았습니다.
(2026년 추가: 현재는 미야기현 시오가마시를 거점으로 주식회사 Webharu를 경영하고 있습니다)
이러한 경험을 살려 폰트 추가 방법과
추천 폰트 등을 해설해 나가겠습니다.
이 글의 요점
- 웹 폰트란?
- 웹 폰트란 어느 단말에서 봐도 글자의 윤곽이 깔끔하고 같은 디자인으로 표시할 수 있는 웹사이트용 폰트입니다. 문자 검색이 가능해 SEO에 강하고, 갱신·운용 시의 문자 수정도 간단합니다.
목차
Webflow에 Google 폰트를 추가하는 방법【가장 간단】
드롭다운에서 선택하기만 하면 추가할 수 있는 가장 간단한 폰트 추가 방법입니다.
- ①에서 추가하고 싶은 폰트를 선택
- ②추가한 폰트가 표시됩니다.
Google 폰트는 쓰기 편한 “웹 폰트”입니다.
사와라비 폰트나 Noto Sans JP 같은 일반적인 폰트를 손쉽게 추가할 수 있습니다.
웹 폰트란?
웹 폰트에 대해 자세히 알고 싶은 분은 사유리 씨가 쓴 아래 글을 살펴봅시다.
【간단】웹 폰트 사용법! Google web fonts를 써 보자(일본어)
웹 폰트의 장점
1. SEO에 강하다(문자 검색이 가능)
2. 갱신·운용 시의 문자 수정이 간단
3. 어느 단말에서 봐도 글자의 윤곽이 깔끔하다
4. 어느 단말에서 봐도 같은 디자인으로 표시할 수 있다
5. 문자 디자인의 차별화가 가능
6. PC용, 스마트폰용으로 문자 이미지를 따로 만들지 않아도 된다
해당 글에서는 웹 폰트의 장점을 위와 같이 적고 있습니다. 단말마다 표시가 달라지는 것은 여러모로 불편하므로, 웹 폰트를 사용하는 것이 최선의 선택일지도 모릅니다.
Webflow에 Adobe 폰트를 추가하는 방법【3스텝】
Webflow에서 Adobe font를 사용하려면 다음 3스텝을 진행해야 합니다.
- 【순서 1】API 토큰 설정
- 【순서 2】추가할 폰트 선택
- 【순서 3】Webflow에서 저장
전체적으로 약 5분 정도의 작업입니다.
Adobe 폰트를 전부 사용하려면 결제가 필요합니다. 그중에는 무료로 쓸 수 있는 폰트도 있으므로, 이번에는 무료로 쓸 수 있는 폰트를 기준으로 설정해 나가겠습니다. ※유료판이라도 추가 방법은 같습니다.
【순서 1】API 토큰을 설정한다
우선 API 토큰을 받아 Webflow에 붙여 넣읍시다.
- ①Adobe Fonts account page에서 Adobe 페이지에 로그인.
- ②로그인했다면 오른쪽 위의 계정을 선택해 API 토큰 페이지를 엽니다.
- ③“새 API 토큰 만들기”를 클릭해 API 토큰을 만듭니다.
- Webflow의 Adobe 폰트 칸에 붙여 넣습니다.
API 토큰 설정은 이것뿐입니다. 다음으로 폰트를 선택해 나가겠습니다.
【순서 2】추가할 폰트를 선택
①“□ Creative Cloud에서 이용 가능한 폰트를 표시”의
체크를 해제하면 무료로 쓸 수 있는 폰트만 표시할 수 있습니다.
②＜/＞ 표시가 붙어 있는 폰트가 쓸 수 있는 폰트입니다.
유료판으로 옮기면 쓸 수 있는 폰트가 많아집니다.
이번에는 “겐노카쿠고딕(Source Han Sans)”과 “호노카마루고딕(Honoka Maru Gothic)”을 추가해 보겠습니다.
- ②＜/＞를 클릭.
- 웹 프로젝트 파일을 만들고 저장.
- 추가하고 싶은 폰트는 전부 같은 파일에 추가.
이 폰트들을 웹 페이지에서 사용하려면, 이 코드를 HTML의 <head> 태그 안에 복사합니다.
라고 표시되지만, Webflow는 노코드이므로 무시하고 종료합니다.
Webflow의 폰트 화면으로 돌아갑시다.
【순서 3】Webflow에서 저장
추가한 파일과 폰트가 표시되어 있으므로 선택해 저장합니다.
이것으로 Adobe font의 추가는 완료입니다.
※표시되지 않는 분은 페이지를 한 번 새로고침해 봅시다.
※저장하지 않으면 반영되지 않으므로 저장을 잊지 마세요!
【주의】폰트가 반영되지 않는 경우
Webflow 안에도 적혀 있지만 반영에 시간이 걸리는 경우가 있습니다. 폰트의 수가 많으면 더 오래 걸립니다. 조급해하지 말고 천천히 기다립시다. ※통신이 느리면 20분 정도 걸리는 경우도 있습니다.
Webflow에 커스텀 폰트를 추가하는 방법【2MB 이하로 압축→Webflow에 추가】
Webflow에서 커스텀 폰트를 이용하려면 2MB 이하의 폰트 파일을 업로드합니다.
대부분의 경우에는 폰트의 압축이 필요합니다.
이번에 저는 반영이 알기 쉽도록 “폽라무☆큐트(Poprum Cute)”를 사용합니다.
- 【순서 1】파일을 압축하는 툴을 내려받기
- 【순서 2】폰트를 축소하기
- 【순서 3】WOFF로 변환하기
- 【순서 4】Webflow에 추가하기
위의 흐름을 실제로 해 나가겠습니다.
이번에 이 순서를 배우는 데 참고한 사이트는 아래입니다↓
이 글에서 배운 지식을 Webflow에 적용해 구현해 보려고 합니다.
【순서 1】파일을 압축하는 툴을 내려받기
우선 위 글을 참고해 폰트 내려받기부터 축소까지 진행합니다.
먼저 폰트를 축소하는 앱을 내려받읍시다.
- 무사시 시스템: 서브셋 폰트 메이커
- 무사시 시스템: WOFF 컨버터
Mac의 경우에는 32bit/64bit의 2가지가 있으니
맞는 쪽을 내려받읍시다. 비트 수는 아래 글에서 확인할 수 있습니다.
사용 중인 Mac(컴퓨터)이 32비트인지 64비트인지 알아보는 방법(일본어) “2006년경에 활약하던 Intel Core Duo 이후는 전부 64비트”
라고 적혀 있으므로 새로운 Mac을 쓰고 있는 분은 64Bit입니다.
【순서 2】폰트를 압축한다
먼저 서브셋 폰트 메이커를 사용해 작은 크기의 폰트를 만듭니다.
다음 순서로 폰트를 압축합시다.
①축소하고 싶은 폰트를 선택합니다.
②폰트의 저장 위치를 설정합니다.
③폰트를 만들 문자를 입력합니다.
아래 사이트에서 문자열을 가져와 ③을 채웁니다.
※추가로 자신이 쓰는 특수한 한자 등이 있다면 넣어 둡시다.
④폰트의 이름을 정하고, WOFF 컨버터 실행에 체크를 넣습니다.
서브셋화로 일본어 웹 폰트의 용량을 경량화하는 방법(일본어)
제1수준 한자＋기호＋로마자＋가타카나＋히라가나를 아래에서 복사해, 서브셋 폰트 메이커의 폰트에 담을 문자 부분에 붙여 넣습니다. https://docs.google.com/document/d/1Qs-XTAZEgFxx9TbfTNCrGMGuEJqxv2T5SKTLRJ4Gv6Q/edit
※위 이미지처럼 ④의 폰트명에 “☆” 같은 사용 불가 문자가 있으면
앱이 종료됩니다. 반각 영숫자만으로 파일명을 정합시다.
모든 항목을 입력하고 생성을 시작하면 2MB 이하의 파일을 만들 수 있습니다.
폰트 파일은 되도록 가벼운 편이 좋으므로 조금 더 압축합시다.
여기서 쓰는 것이 WOFF 컨버터입니다.
【순서 3】WOFF로 변환한다
WOFF 앱을 사용해 파일을 WOFF로 변환합니다.
WOFF2가 가장 가벼워지지만 지원하는 플랫폼이 적으므로,
용도에 맞춰 제작합시다. 저는 WOFF2로 만들려고 합니다.
체크박스에 표시해 WOFF2를 만듭시다.
그 밖의 설정은 특별히 변경할 필요가 없습니다.
【순서 4】Webflow에 추가한다
자, 경량화한 파일이 완성되었다면 실제로 Webflow에 업로드합니다.
업로드하면 굵기를 고를 수 있지만,
경량화한 파일에는 원래 굵은 글씨 정보가 없어 반영되지 않습니다.
서브셋 폰트 메이커를 사용했을 때의 굵기를 골라 이름을 붙입시다.
굵기를 바꾼 파일을 따로 2개 업로드하면 둘 다 사용할 수 있습니다.
이상이 커스텀 폰트의 설정입니다.
정리: Webflow에 폰트를 추가한다면 Google 폰트를 추천
Webflow에서 폰트를 추가하는 전 공정을 소개했습니다. 다시 한번 복습해 봅니다.
- Google 폰트는 선택하기만 하면 되므로 1분 정도면 끝낼 수 있고 아주 간단합니다.
- Adobe 폰트는 API 토큰만 설정할 수 있으면, 그다음은 Adobe에서 폰트를 고르기만 하면 됩니다.
- 커스텀 폰트는 폰트의 축소만 할 수 있으면 업로드가 가능합니다. “서브셋 폰트 메이커”와 “WOFF 컨버터”로 축소합니다.
웹 폰트를 추가해 사이트가 무거워지는 것이 불안한 분은
한 번 용량 체커 등으로 확인해 봅시다.
커스텀 폰트를 추가→폰트명을 여러 폰트로 설정한다는 글을 본 적이 있습니다.
같은 설정을 하고 코드를 출력하면 폰트 패밀리를 여러 폰트로 설정할 수 있습니다.
다만 Webflow의 제작 화면에서는 표시가 시원치 않았기 때문에, 이번에는 해설을 넘겼습니다.
Webflow 포럼에서는
“서버 자체에 폰트를 내려받아야 하기 때문에
폰트 패밀리를 여러 개 지정해도 의미가 없다”
는 답변도 보입니다…
어쨌든 Webflow 내부에서 끝내려면 웹 폰트를 사용하는 것이 가장 좋습니다.
폰트로 고민된다면 Google 폰트에서 정합시다.
사와라비, Noto Sans, 한나리 같은 폰트는 쓰기 편하고 인기가 많습니다!
제작 실적
자주 묻는 질문
Webflow에 폰트를 추가하는 방법은 몇 가지 패턴인가요?
Google 폰트·Adobe 폰트·커스텀 폰트의 3가지 패턴입니다. 가장 간단한 것은 드롭다운에서 선택하기만 하면 되는 Google 폰트로, 1분 정도면 추가할 수 있습니다.
Webflow에 Adobe 폰트를 추가하려면 어떻게 해야 하나요?
API 토큰 설정, 추가할 폰트 선택, Webflow에서 저장의 3스텝으로 전체 약 5분 정도의 작업입니다. Adobe 폰트에는 무료로 쓸 수 있는 폰트도 있고, 유료판이라도 추가 방법은 같습니다.
Webflow의 커스텀 폰트에 용량 제한이 있나요?
2MB 이하의 폰트 파일을 업로드해야 하며, 대부분의 경우 폰트의 압축이 필요합니다. “서브셋 폰트 메이커”로 폰트를 축소하고 “WOFF 컨버터”로 WOFF로 변환해 경량화합니다.
Webflow에서 추가한 폰트가 반영되지 않는 경우에는 어떻게 하나요?
저장하지 않으면 반영되지 않으므로 먼저 저장을 잊지 않았는지 확인합시다. 반영에 시간이 걸리는 경우도 있고, 폰트의 수가 많으면 더 오래 걸립니다. 통신이 느리면 20분 정도 걸리는 경우도 있으니 조급해하지 말고 기다립시다.
웹 폰트를 쓰는 장점은 무엇인가요?
문자 검색이 가능해 SEO에 강하고, 갱신·운용 시의 문자 수정이 간단하며, 어느 단말에서 봐도 글자의 윤곽이 깔끔하고 같은 디자인으로 표시할 수 있다는 장점이 있습니다. 단말마다 표시가 달라지는 불편을 피할 수 있으므로 웹 폰트의 사용이 최선의 선택이라고 할 수 있습니다.
