정중식’ 블로그
정중식’ 블로그/
폰트 적용
폰트 적용

폰트 적용

카테고리
React
날짜
2024년 06월 12일
작성자
JeongjungsikJeongjungsik
태그
font
EOT, TTF/OTF, WOFF, WOFF2 등으로 폰트 형식은 다양하다.
EOT→TTF/OTF→ WOFF→ WOFF2 순으로 용량이 작다.
(WOFF2가 제일 용략이 작음)
 
여기서 WOFF와 WOFF2 두개가 웹 사이트에서 자주 쓰이는 형식이다.
 

웹 폰트 적용법

1. 외부 링크 의존

이 방식은 외부 링크에 의존하다보니 응답이 지연되거나 사이트가 다운되면 폰트 로딩에 실패 할 수있다.
  • index.html에 다음 삽입
  <link
      href="https://hangeul.pstatic.net/hangeul_static/css/NanumGeumEunBoHwa.css"
      rel="stylesheet"
    />
  • 폰트 패밀리 css 변경
body {
  font-family: 'NanumGeumEunBoHwa' !important;
}

2. 다운로드 받아 폰트 적용하기

  • src/assets/fonts 경로에 다운받은 폰트 파일과 변경해준 폰트 woff와 woff2를 넣어주자.
      • (src하위경로에 폰트를 넣는 이유는, src아래에 넣으면 번들링에 포함이되고, 최적화 효과를 누릴 수 있어서 넣어줌)
 
  • 아래처럼 우선 적용할 폰트 형식을 먼저 적어주고, 그 폰트 형식 적용이 안되는 사이트라면 그다음 적용해줄 폰트 형식을 적어준다. 최종적으로는 모든 사이트에서 호환되는 ttf 형식을 적어준다.
@font-face {
  font-family: 'NanumGeumEunBoHwa';
  src:
    url('../assets/fonts/NanumGeumEunBoHwa.woff2') format('woff2'),
    url('../assets/fonts/NanumGeumEunBoHwa.woff') format('woff'),
    url('../assets/fonts/NanumGeumEunBoHwa.ttf') format('truetype');
}

body {
  font-family: NanumGeumEunBoHwa;
}
 

댓글

guest