본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

커스텀 폰트를 왜 사용할까요?

Framer는 기본적으로 다양한 웹 폰트와 Google·Fontshare 연동을 제공합니다. 하지만 브랜드 고유 폰트나 직접 만든 서체를 써야 하는 경우 ‘Custom’ 탭에 업로드하여 사용해야 합니다.

업로드 & 적용 단계

1. 프로젝트에 텍스트 레이어 추가

2. 오른쪽 속성 패널에서 폰트 선택기 열기

3. Custom 탭 클릭

4. Upload 버튼 누르기

5. 로컬에서 .woff2, .woff, .ttf, .otf 파일 선택

6. 업로드 후 ‘Custom’ 탭에 폰트 항목 추가됨

7. 해당 폰트를 선택하면 텍스트에 바로 적용 가능

Note : .woff2 포맷이 웹 최적화에 가장 좋습니다. 파일 크기도 작고 로딩도 빠릅니다.

Figma에서 가져온 커스텀 폰트 적용 팁

Figma에서 작업한 텍스트를 Framer로 불러오면, 커스텀 폰트가 기본 폰트로 대체되는 경우가 있습니다.
이럴 땐 Framer 프로젝트 내에서 해당 커스텀 폰트를 업로드한 뒤, 텍스트를 선택해서 다시 적용해야 합니다.

성능 최적화 & 라이선스

• 폰트 성능: .woff2 파일 사용 시 Framer는 자동으로 최적화(압축·subsetting·font-display: swap) 기능을 제공합니다.

• 폰트 라이선스: 웹사이트용이라면 Webfont(WOFF/WOFF2) 라이선스가 필요합니다. 데스크톱용(TTF/OTF)보다 빠르고, 호환성도 높아요.

폰트 업로드 후 오류 해결 팁

• 변형(weight) 항목이 안 보인다면?: .woff2 파일만 올려졌는지 확인해보세요.

• 폰트 패밀리/스타일 인식이 안 된다면: 폰트 이름(metadata)가 실제 이름과 일치하는지, 여러 스타일이 하나의 패밀리로 묶여 있는지 확인해야 합니다. (Glyphs 등에서 수정)

이 기능은 어떤 서비스에 필요할까요?

예를 들어 전문적인 기업 브랜드 페이지나 사이트에서는 폰트 스타일이 중요한데, 이런 경우 직접 만들거나 구매한 폰트를 적용해야 하는 경우가 많습니다. 이런 경우 우리는 ‘커스텀 폰트 업로드’를 통해 프레이머 내에서 다양한 폰트를 자유롭게 사용할 수 있습니다.

본 글은 Framer 공식 블로그의 ‘Adding custom fonts’ 를 번역·각색한 콘텐츠입니다.