웹 최적화할때 디자이너가 건네준 폰트를 적용하는 방법들은 각기 다릅니다.

본인은 지금까지 3가지의 방식으로 적용을 해보았는데요, 그에 따른 장단점들을 정리해보겠습니다!

1️⃣. 웹 폰트 서비스 이용

---

How to use ?

1. 네이버 글꼴 들어가서 마음에 드는 글꼴을 찾습니다.
   

2. 웹 폰트 URL을 index.html 또는 다른 뼈대 html 파일에 link로 적어줍니다. 그리고 사용하고자 하는 곳에 font-familiy 속성으로 넣어줍니다.

   // index.html 또는 다른 html
   <link href="https://hangeul.pstatic.net/hangeul_static/css/NanumGarMaesGeur.css" rel="stylesheet">
   
   .
   .
   .
   
   // index.css 또는 global.css 또는 다른 적용 css 파일
   
   body {
   	font-family: 'NanumGarMaesGeur';
   }

2️⃣. 로컬 폰트 이용

---

How to use ?

1. 1️⃣의 첫번째와 마찬가지로 원하는 폰트를 찾습니다.

2. 해당 다운받은 파일을 조금 더 가벼운 파일인 WOFF, WOFF2로 변환 및 다운로드합니다.
   

3. src 폴더 안에 assets/fonts 폴더 안에 다운받은 파일들을 저장하고 사용하고자 하는 파일에 적용합니다.

   /src/assets/fonts
   /*
   *
   * 다운받은 파일들을 해당 파일에 옮겨놓기
   *
   */
   .
   .
   .
   
   @font-face {
     font-family: 'NanumGeumEunHwa';
     src: url('./assets/fonts/NanumGeumEunHwa.woff2') format('woff2'),
          url('./assets/fonts/NanumGeumEunHwa.woff') format('woff');
          url('./assets/fonts/NanumGeumEunHwa.ttf') format('truetype');
   	font-weight: 400;
     font-style: normal;
     font-display: swap;
   }
   
   body {
   	font-familiy: 'NanumGeumEunHwa';
   }

왜 굳이 woff2, woff를 변환해서 추가 다운로드해야할까 ?

☑️ 각 포맷은 호환성, 압축성, 성능의 차이가 있어요! 비교요약하자면 다음과 같습니다.

형식	설명	장점	단점	사용 사례
WOFF2	최신 웹 폰트 형식, 높은 압축률	파일 크기 작음, 빠른 로딩 속도, 최신 브라우저 지원	구형 브라우저에서 지원되지 않음	최신 웹사이트, 모바일 최적화
WOFF	웹을 위한 표준 폰트 형식, WOFF2의 이전 버전	압축되어 있어 파일 크기 작음, 많은 브라우저에서 지원	WOFF2에 비해 파일 크기 큼	넓은 브라우저 호환성 필요한 웹사이트
OTF	고급 타이포그래피 기능 지원, 로컬 설치 가능	복잡한 글리프와 고급 서체 기능 지원, 모든 시스템에서 사용 가능	파일 크기 큼, 웹 최적화 부족	로컬 설치용 폰트, 고급 타이포그래피
TTF	초기의 표준 폰트 형식, 간단한 로컬 설치 가능	광범위한 호환성, 거의 모든 시스템에서 사용 가능	압축되지 않아서 파일 크기 큼, 웹 최적화 부족	로컬 설치용 폰트, 간단한 웹 폰트

-> 따라서 woff2로 먼저 적용하고 woff -> otf/ttf 적용하는것이 최적화 성능에 더 좋습니다 !

3️⃣. fontsource 라이브러리 이용

---

How to use ?

1. 외부 라이브러리 설치(이때 fontsource에 있는지 확인하고 사용 !)

   npm i @fontsource/pretendard
   
   or 
   
   yarn add @fontsource/pretendard

2. 사용하고자 하는 곳에다가 기제해놓고 적용하기

   import "@fontsource/pretendard";
   
   or
   
   // 필요한 weight만 골라서 적용도 가능
   import "@fontsource/pretendard/400.css";
   import "@fontsource/pretendard/500.css";
   import "@fontsource/pretendard/700.css";
   
   .
   .
   .
   
   body {
   	font-familiy: 'pretendard'
   }

👍 결론

구분	fontsource/pretendard	로컬 폰트 다운로드	웹폰트 CDN 사용
설치/적용	npm 패키지로 간편 설치	수동 설정 필요, 초기 설정 번거로움	<link> 태그로 간편하게 적용
업데이트 관리	npm 패키지 업데이트로 자동 관리	수동으로 업데이트 필요	유지 보수 필요 없음, 자동 업데이트
성능 최적화	font-display: swap 기본 적용, 선택적 로드 가능	직접 서브셋 생성 가능	CDN의 빠른 로드 속도, 캐싱 가능
의존성	npm 패키지 의존성 추가	의존성 없음	외부 서비스(CDN)에 의존
커스터마이징 가능성	제한적	완전한 제어 가능	제한적, 수정 어려움
보안 및 개인정보	안전함	안전함	외부 요청 시 보안 및 개인정보 이슈 발생 가능