[CSS] 가변 폰트(Variable fonts)란?

 

가변 폰트(Variable Font)은 한 개의 폰트 파일 안에 여러 개의 스타일을 담을 수 있는 기술이다.

일반적으로, 폰트은 여러 개의 별도 파일로 제공되며, 각각의 파일은 다른 스타일를 담고 있다.

예를 들어, 'Regular', 'Medium ', 'Bold'과 같은 여러 형태의 폰트은 각각 별도의 파일로 제공되었고,

이는 애플리케이션을 개발할 때 여러 폰트 파일을 관리하고 불러와야 하는 번거로움을 가져왔다.
가변 폰트은 이런 문제를 해결하고자 만들어진 개념이다. 원하는 두께나 스타일을 프로그래밍적으로 선택할 수 있다.

이를 통해 여러 폰트 파일 관리의 번거로움이 줄어들고 데이터의 크기와 다운로드 시간을 줄일 수 있다.

 

Get started by importing the font you would like to use from next/font/google as a function.
We recommend using variable fonts for the best performance and flexibility.
- Next.js Docs https://nextjs.org/docs/app/building-your-application/optimizing/fonts

Next.js 공식문서를 보면 Next.js는 구글 폰트를 자체 호스팅되어 있는데 최고의 퍼포먼스와 유연성을 위해 가변폰트의 사용을 추천하고 있다. 링크에 들어가면 구글 폰트에서 가변폰트을 지원하는 폰트을 볼 수 있다.

 

 

아래는 직접 가변폰트를 적용해보았다. 인풋값에 따른 font-weight 값을 변경해 본 것이다.

 

 

 

프리텐다드 폰트 디자이너님 블로그의 프리텐다드 주제의 글에 들어가면 보이는 애니메이션도 가변폰트를 사용한 걸 볼 수 있다. 가변폰트를 통하여 폰트 애니메이션 효과를 효율적으로 적용할 수 있을 것 같다.

Pretendard