[CSS] @font-face 유의점

삐삐뽀·2024년 6월 29일

todoList

목록 보기
1/2

처음에 예쁜 폰트를 입히고 싶은 마음에 @font-face를 알게 되었고, 2개의 폰트를 따로 설치하여 입혀보고 싶었다. 그래서 h1 지정 폰트 A와 그 외 폰트는 B로 사용하고 싶어 아래와 같이 코딩했었는데 한 가지 폰트만 적용되어 있었다. @font-face는 1개의 폰트의 설정만 가능했다.

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'cormorant-italic' ; 
  src: url('./fonts/cormorant-italic.TTF') format('truetype'); 
}

@font-face {
  font-weight: normal;
  font-style: normal;
  font-family: 'nanumaround';
  src: url('./fonts/nanumaround.TTF') format('truetype'); 
}

이렇게 폰트 개수 별로 한 세트씩 묶어주면 각자 font-family:폰트명 해서 예쁘게 적용할 수 있다 :D


차근차근 성장하는 FE 주니어 입니다😊 잘못된 정보가 있다면 댓글로 남겨주세요ヾ(•ω•`)o

profile
편리한 UI를 제공하는 FE 개발자를 꿈꾸는 취준생

0개의 댓글