next.js에서 local font를 사용하는 이유

1. 속도 향상

• 구글 웹 폰트를 import하는 방식은 CDN을 통해 폰트 파일을 로드해야하기 때문에 네트워크 상태에 따라 로드 속도가 영향을 받을 수 있다. => 로컬 파일을 사용하면 네트워크 요청이 줄어들어 속도 개선

2. 사용자 경험 개선

• 폰트 로딩 속도가 빨라지면서, FOIT(Flash of Invisible Text)나 FOUT(Flash of Unstyled Text) 현상이 줄어든다. 간단히 말하면 폰트가 로드 되지 않아서 텍스트가 보이지 않거나 다른 폰트로 보이는(대체폰트를 지정해놓지 않으면 굴림체로 보인다던가..ㅎ) 현상을 줄일 수 있다.

3. 캐싱 및 오프라인 접근성

• 프로젝트에 포함된 로컬 폰트 파일은 브라우저 캐시에 저장된다. 그 이후 방문 시에는 로컬 캐시에서 불러올 수 있어 성능 향상에 도움. 또한 오프라인 상태에서도 폰트를 사용할 수 있다.

4. 의존성 및 유지보수 간소화

• 외부 CDN에 의존하지 않기 때문에 구글 폰트 서버의 상태에 영향을 받지 않고 폰트를 안정적으로 로드할 수 있다.(2번과 비슷한 얘기). 또한 폰트 버전을 관리할 수 있어 유지보수가 간편하다.

5. 라이선스 및 법적 문제

• 내가 자주쓰는 Pretendard 같은 로컬 폰트는 프로젝트 내에 폰트 파일을 포함하는 형태이므로, 라이선스 조건에 맞춰 사용하면 법적 문제를 최소화할 수 있다. 일부 폰트는 구글 폰트 API를 통해 사용하는 것에 제한이 있을 수 있기 때문..

 

로컬 폰트를 사용하는 방식은 성능, 사용자 경험, 유지보수 측면에서 합리적이다. 특히 프로젝트가 글로벌 사용자층을 대상으로 하거나 속도 최적화가 중요한 경우, localFont로 폰트를 불러오는 방식이 더 유리함을 알 수 있다!