폰트 파일 하나로 굵기 조절? 가변 폰트의 모든 것 (feat. 구글 폰트)

폰트 파일, 왜 하나로 합쳐야 할까?

블로그를 운영하거나 웹사이트를 만들 때 가장 신경 쓰이는 것 중 하나가 바로 '로딩 속도'입니다. 디자인 욕심에 Thin, Regular, Bold, Black 등 굵기별로 폰트 파일을 4~5개씩 불러오다 보면 사이트가 눈에 띄게 느려지는 경험, 다들 있으시죠?

기존의 방식은 다양한 스타일을 위해 여러 개의 무거운 파일을 다운로드해야 했습니다. 하지만 이제 단 하나의 파일로 모든 굵기와 스타일을 표현할 수 있는 기술이 있습니다. 바로 가변 폰트(Variable Font)입니다. 오늘은 이 혁신적인 기술을 여러분의 티스토리나 웹사이트에 적용하는 방법을 아주 쉽게 알려드리겠습니다.

---

가변 폰트(Variable Font)란 무엇인가?

가변 폰트(OpenType Variable Fonts)는 하나의 폰트 파일 안에 다양한 너비(Width), 굵기(Weight), 기울기(Slant) 등의 스타일 정보를 모두 담고 있는 차세대 폰트 포맷입니다.

쉽게 비유하자면, 예전에는 100g, 200g, 300g짜리 아령을 각각 따로 사야 했다면, 이제는 다이얼을 돌려 무게를 조절할 수 있는 '스마트 아령' 하나만 있으면 되는 것과 같습니다.

기존 폰트 vs 가변 폰트 비교

구분	기존 정적 폰트 (Static Font)	가변 폰트 (Variable Font)
파일 개수	스타일별로 각각 필요 (예: 5개)	단 1개
HTTP 요청	다수 발생 (속도 저하 원인)	1회 발생 (속도 향상)
디자인 자유도	정해진 굵기(100, 400, 700)만 사용	100~900 사이 모든 값 사용 가능

정적 폰트 5개 vs 가변 폰트 1개 로딩 속도 비교

반응형

 

무료 가변 폰트 구하기 (Google Fonts 활용)

가장 쉽고 안전하게 가변 폰트를 구하는 곳은 역시 Google Fonts입니다. 영문 폰트 중에는 'Roboto Flex', 한글 폰트 중에는 'Noto Sans KR'도 가변 축을 지원하는 버전이 있습니다.

1. Google Fonts에 접속합니다.
2. 필터 메뉴에서 'Show only variable fonts'를 체크합니다.
3. 원하는 폰트를 선택하고 다운로드하거나, 제공되는 <link> 태그를 복사합니다.

Tip: 다운로드한 파일의 확장자가 .ttf일 수도 있지만, 웹 최적화를 위해서는 압축률이 월등히 좋은 .woff2 포맷으로 변환하여 사용하는 것을 추천합니다.

 

실전 CSS 적용 가이드 (@font-face 선언)

이제 다운로드한 가변 폰트 파일을 서버(티스토리의 경우 '스킨 편집 > 파일 업로드')에 올리고 CSS로 연결해 봅시다. 여기서 핵심은 format 설정입니다.

@font-face {
  font-family: 'MyVariableFont';
  /* 최신 브라우저 지원을 위한 woff2 포맷 선언 */
  src: url('./images/MyVariableFont.woff2') format('woff2-variations');
  /* 호환성 강화: src: url('./images/MyVariableFont.woff2') format('woff2') tech('variations'); */
  
  font-weight: 100 900; /* 이 폰트가 지원하는 최소~최대 굵기 범위 */
  font-stretch: 75% 125%; /* 너비 범위 (지원하는 경우만) */
}

 

• format('woff2-variations'): 브라우저에게 "이것은 단순한 폰트가 아니라 가변 폰트다"라고 명확히 알려주는 역할을 합니다.
• font-weight: 폰트가 표현할 수 있는 굵기의 범위를 지정합니다.

 

자유자재로 폰트 제어하기 (font-weight & variation-settings)

가변 폰트가 적용되었다면, 이제 마법을 부릴 시간입니다. 기존에는 font-weight: bold 혹은 700처럼 딱딱 끊어지는 값만 썼다면, 이제는 섬세한 조절이 가능합니다.

1. 정밀한 굵기 조절

h1 {
  font-family: 'MyVariableFont', sans-serif;
  font-weight: 650; /* 600과 700 사이의 원하는 굵기 사용 가능 */
}

p {
  font-weight: 325; /* 본문 가독성에 최적화된 미세한 굵기 찾기 */
}

 

2. font-variation-settings 활용 (고급 기술)

가변 폰트는 굵기(wght) 외에도 너비(wdth), 기울기(slnt) 등 다양한 '축(Axis)'을 가지고 있습니다. 이를 제어하기 위해 font-variation-settings 속성을 사용합니다.

.fancy-text {
  font-family: 'MyVariableFont';
  /* 굵기(wght)는 700, 너비(wdth)는 85로 좁게 설정 */
  font-variation-settings: 'wght' 700, 'wdth' 85;
  transition: all 0.3s ease;
}

/* 마우스 오버 시 글자가 두꺼워지고 넓어지는 애니메이션 */
.fancy-text:hover {
  font-variation-settings: 'wght' 900, 'wdth' 100;
}

주의: font-variation-settings는 매우 강력하지만, font-weight나 font-style 같은 표준 CSS 속성으로 대체 가능한 경우에는 표준 속성을 우선 사용하는 것이 코드 가독성에 좋습니다.

728x90

 

웹 최적화의 미래, 가변 폰트로 시작하세요

가변 폰트는 단순한 트렌드가 아니라 웹 성능 최적화와 반응형 디자인을 위한 필수 기술로 자리 잡고 있습니다. 파일 용량은 줄이고, 디자인 표현력은 극대화할 수 있는 가변 폰트를 여러분의 티스토리 스킨에 지금 바로 적용해 보세요. 로딩 속도가 빨라지면 방문자도, 검색 엔진도 여러분의 블로그를 더 좋아하게 될 것입니다!

오늘 알려드린 가변 폰트 적용법이 도움 되셨나요? 처음에는 조금 낯설 수 있지만, 한 번 적용해 두면 사이트 속도와 디자인 퀄리티가 확연히 달라지는 것을 느끼실 겁니다. 적용하시다가 막히는 부분이 있다면 언제든 댓글로 남겨주세요!