가변 폰트 CSS 적용 방법 : 가변 폰트 (Variable Fonts)는 하나의 폰트 파일로 다양한 스타일과 굵기를 조절할 수 있는 최신 웹 폰트 기술입니다. 가변 폰트를 사용하면 하나의 폰트로 다양한 굵기와 스타일을 설정할 수 있어 웹사이트 로딩 속도를 개선할 수 있고 , 다양한 타이포그래피 효과를 쉽게 적용할 수 있습니다. 이번 글에서는 CSS를 사용해 가변 폰트를 적용하는 방법을 예시와 함께 쉽게 설명하겠습니다.
목차
가변 폰트 CSS 적용 방법
가변 폰트를 사용하면 유연성 있는 웹디자인을 할 수 있습니다. CSS를 사용하여 가변 폰트를 적용하는 방법을 단계별로 알아보겠습니다.
가변 폰트 파일 준비하기
먼저, 사용하고자 하는 가변 폰트 파일(.ttf 또는 .woff2)을 준비합니다. 한글 가변 폰트로는 대표적으로 네이버 나눔스퀘어네오와 Pretendard 폰트가 있습니다.
이 글에서는 구글 폰트에서 제공하는 “Roboto Flex” 가변 폰트를 예시로 사용하겠습니다.
폰트 파일 로드하기
- HTML 파일에 폰트를 로드하기 위해
<link>태그를 사용합니다.<head></head>사이에 아래 코드를 삽입합니다.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Flex:wght@100..900&display=swap" rel="stylesheet">
- 구글 폰트와 같이 외부 소스를 사용하지 않고 직접 로컬에 업로드하여 사용할 때에는 폰트 업로드 후 CSS 파일에 아래와 같이 코드를 작성합니다.
@font-face {
font-family: 'Roboto Flex';
src: url('폰트를 업로드한 폴더 경로/RobotoFlex.woff2') format('woff2'),
url('폰트를 업로드한 폴더 경로/RobotoFlex.ttf') format('truetype');
font-weight: 100 900; /* 가변 폰트의 가중치 범위 */
font-stretch: 75% 100%; /* 가변 폰트의 폭 범위 */
font-style: normal; /* 가변 폰트의 스타일 */
}CSS에서 가변 폰트 적용하기
가변 폰트를 적용하려면 font-family 속성과 함께 가변 축을 조절하는 속성을 사용해야 합니다.
body {
font-family: 'Roboto Flex', sans-serif;
}
h1 {
font-weight: 900; /* 폰트 굵기를 최대값으로 설정 */
}
p {
font-weight: 100; /* 폰트 굵기를 최소값으로 설정 */
}위의 CSS 코드는 h1 태그는 최대 굵기(900), p 태그는 최소 굵기(100)로 설정한 예시입니다.
가변 폰트 폭, 기울기 적용하기
가변 폰트는 폰트 하나로 글자의 굵기(weight) 외에도 기울기, 폭 등을 아래 예시와 같이 설정할 수 있습니다.
p {
font-variation-settings:
'wght' 300, /* 굵기를 300으로 설정 */
'wdth' 75, /* 폭을 75%로 설정 */
'slnt' -10; /* 기울기를 -10도 설정 */
}가변 폰트 애니메이션 효과
가변 폰트를 사용하면 CSS를 통해 다양한 애니메이션 효과를 적용할 수 있습니다. 가변 폰트는 폰트의 다양한 축(굵기, 폭, 기울기 등)을 조절할 수 있기 때문에, 이 축을 애니메이션으로 활용할 수 있습니다. 몇 가지 예시를 통해 가변 폰트로 할 수 있는 애니메이션 효과를 소개하겠습니다.
폰트 굵기 애니메이션
폰트의 굵기(weight)가 변하는 애니메이션 효과를 줄 수 있습니다. 아래 예시는 h1 제목 태그에 폰트의 굵기가 변하는 애니메이션 효과를 줄 수 있는 코드입니다.
@keyframes fontWeightAnimation {
0% {
font-variation-settings: 'wght' 100;
}
100% {
font-variation-settings: 'wght' 900;
}
}
h1 {
font-family: 'Roboto Flex', sans-serif;
font-size: 3rem;
animation: fontWeightAnimation 3s infinite alternate;
}animation: fontWeightAnimation 3s infinite alternate;:
fontWeightAnimation애니메이션을h1요소에 적용합니다.- 애니메이션의 지속 시간은 3초입니다.
infinite는 애니메이션이 무한 반복된다는 의미입니다.alternate는 애니메이션이 끝날 때마다 방향을 반대로 바꾸어 다시 실행된다는 의미입니다. 즉, 애니메이션이 처음부터 끝까지 진행되었다가, 끝에서 다시 처음으로 돌아오는 형태로 반복됩니다.
폰트 폭 애니메이션
텍스트의 너비가 변하는 애니메이션 효과를 줄 수 있습니다. 아래 예시는 p 태그에 텍스트 너비가 변하는 애니메이션 효과를 준 코드입니다.
@keyframes fontWidthAnimation {
0% {
font-variation-settings: 'wdth' 75;
}
100% {
font-variation-settings: 'wdth' 100;
}
}
p {
font-family: 'Roboto Flex', sans-serif;
font-size: 2rem;
animation: fontWidthAnimation 3s infinite alternate;
}폰트 기울기 애니메이션
텍스트가 기울어지는 애니메이션 효과를 줄 수 있습니다. 아래 예시는 h2 제목 태그에 기울기가 변하는 애니메이션 효과를 줄 수 있는 코드입니다.
@keyframes fontSlantAnimation {
0% {
font-variation-settings: 'slnt' 0;
}
100% {
font-variation-settings: 'slnt' -10;
}
}
h2 {
font-family: 'Roboto Flex', sans-serif;
font-size: 2.5rem;
animation: fontSlantAnimation 3s infinite alternate;
}폰트 굵기, 폭, 기울기 복합 애니메이션
여러 가지 애니메이션 효과를 동시에 적용할 수 도 있습니다. 아래 예시는 h4 제목 태그에 애니메이션 효과를 줄 수 있는 코드입니다.
@keyframes stepFontAnimation {
0% {
font-variation-settings: 'wght' 100, 'wdth' 75, 'slnt' 0;
}
33% {
font-variation-settings: 'wght' 400, 'wdth' 85, 'slnt' -5;
}
66% {
font-variation-settings: 'wght' 700, 'wdth' 90, 'slnt' -7;
}
100% {
font-variation-settings: 'wght' 900, 'wdth' 100, 'slnt' -10;
}
}
h4 {
font-family: 'Roboto Flex', sans-serif;
font-size: 2rem;
animation: stepFontAnimation 5s infinite alternate;
}폰트 호버 (hover) 애니메이션
폰트 위에 마우스를 올렸을 때 애니메이션 효과를 줄 수도 있습니다. 아래 코드는 h3 제목 태그에 마우스 호버 시 애니메이션이 적용되도록 한 코드입니다.
h3 {
font-family: 'Roboto Flex', sans-serif;
font-size: 2rem;
font-variation-settings: 'wght' 100, 'wdth' 75, 'slnt' 0;
transition: font-variation-settings 0.3s ease;
}
h3:hover {
font-variation-settings: 'wght' 900, 'wdth' 100, 'slnt' -10;
}가변 폰트를 사용하여 다양한 애니메이션을 구현하는 방법을 알아보았습니다. 가변 폰트를 통해 웹 페이지를 더욱 다채롭고 동적인 디자인으로 꾸며보세요!
