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

Framer에서 제작된 모든 사이트는 웹 폰트 또는 커스텀 폰트를 사용하며, 브라우저가 렌더링하기 전에 반드시 로드해야 합니다. Framer는 텍스트 렌더링 속도를 높이기 위해 다양한 최적화 방식을 적용합니다.

폰트 최적화 팁

• Light(300)에서 Bold(700)까지의 웹 폰트 굵기를 사용하세요.
  이 범위의 텍스트는 font-display: swap 규칙 덕분에 로딩 중에도 숨겨지지 않습니다.

• Google Fonts 사용을 권장합니다.
  Google Fonts는 자동 서브세팅(subsetting)이 적용되어 더 빠르게 로드됩니다.
  직접 업로드하지 말고, “Web” 탭에서 선택하는 것이 좋습니다.

지원하는 폰트 종류

Google fonts: “Web” 탭에서 선택 가능하며, fonts.google.com에서 제공됩니다.
Fontshare 폰트:“Web” 탭에서 선택 가능하며, fontshare.com에서 제공됩니다.
사용자 업로드 폰트: 사용자가 직접 업로드한 폰트로, Custom 탭의 Font에서 접근할 수 있습니다.
표준 Inter: 새 텍스트 블록에 기본 적용되는 폰트로, Google Fonts 버전과 달리 이탤릭체(italics)를 지원합니다.

각 폰트 유형은 출처와 사용 방식에 따라 최적화 방식이 다릅니다.

Font-display: swap

이 CSS 규칙은 웹 폰트가 로드될 때까지 시스템 폰트를 먼저 표시하여, 사용자가 느끼는 로딩 시간을 줄여줍니다.

적용 대상: Google Fonts 및 Fontshare Fonts (Serif / Sans-serif, Light~Bold 굵기), Custom Fonts (모든 굵기와 스타일), Standard Inter (Light~Bold 굵기)

유의사항

• Thin(100)과 같은 특수 굵기는 시스템 폰트와 차이가 커서 적용되지 않습니다.

• 장식용(decorative) 폰트 등 비-산세리프 계열은 대체 폰트(예: Arial)와의 불일치를 방지하기 위해 적용되지 않습니다.

Framer는 font-display: swap이 적용된 폰트에 대해 시스템 폰트가 실제 폰트와 최대한 비슷하게 보이도록 size-adjust 같은 CSS 규칙을 계산·적용합니다. 이를 통해 웹 폰트가 로드될 때 발생하는 화면 밀림 현상을 최소화합니다.

폰트 서브세팅

많은 폰트가 라틴, 키릴, 그리스 문자 등 여러 알파벳을 지원합니다. 그러나 사이트가 하나의 언어만 사용한다면 불필요한 문자 세트를 모두 다운로드할 필요는 없습니다.

적용 대상: Google Fonts, Standard Inter

최적화 방식

• Google Fonts는 자동으로 서브세팅을 처리합니다.

• Framer는 Standard Inter 폰트를 Google Fonts와 동일한 방식으로 서브세팅합니다.

• 브라우저는 페이지에 실제 사용된 문자를 기반으로 필요한 서브세트만 로드하여 폰트 파일 크기를 줄입니다.WOFF2 폰트 압축

WOFF2 폰트 압축

WOFF2는 가장 최신이자 효율적인 폰트 압축 형식으로, TTF나 OTF보다 훨씬 용량이 작습니다.

적용 대상: Google Fonts, Fontshare Fonts, 2023년 11월 이후 업로드된 Custom Fonts, Standard Inter

세부 사항

• 2023년 11월 이전에 업로드한 Custom Fonts는 기존 형식을 유지합니다.

• 업그레이드하려면 기존 폰트와 함께 .woff2 파일을 업로드하세요. 그러면 Framer가 자동으로 WOFF2 버전을 사용합니다.

• 자동 변환은 사이트 디자인에 영향을 줄 수 있는 문제를 방지하기 위해 적용되지 않습니다.

이와 같은 최적화 덕분에, Framer에서 제작된 모든 사이트는 더 빠른 폰트 로딩과 안정적인 성능을 보장받습니다. Google Fonts를 적극 활용하고, 적절한 굵기와 압축 형식을 선택하여 웹사이트의 텍스트 경험을 개선해보세요.

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