Skip to main content

웹 폰트와 로컬 폰트 최적화 가이드

로컬 폰트(Local Font)​

사용자의 컴퓨터나 서버에 설치된 폰트이다.
개발자가 폰트를 웹 서버에 업로드하고 CSS로 적용하여 사용할 수 있으며, 웹폰트보다 로딩 속도가 빠르다.

웹 폰트(Web Font)​

온라인의 특정 서버(예: Google Fonts)에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 방법이다.
웹 서버와 사용자 간 네트워크 대역폭을 사용하여 폰트 파일을 다운로드하기 때문에 폰트 파일의 크기가 클수록 로딩 시간이 느려질 수 있다.

폰트 확장자 비교​

확장자설명
TTF (TrueType Font)대부분의 운영체제에서 지원되며 벡터 글꼴 형식으로 고해상도 디스플레이에 적합
OTF (OpenType Font)TTF의 확장 버전으로 기능이 많지만 파일 크기가 큼
WOFF (Web Open Font Format)웹 전용 포맷으로 압축률이 높아 로딩 속도가 빠름
WOFF2최신 포맷으로 WOFF보다 압축률이 더 높음 (단, IE11 이하에서는 미지원)

WOFF2가 모든 최신 브라우저에서 지원되므로, 특별한 이유가 없다면 WOFF2만 사용해도 충분하다.

@font-face {
  font-family: "notoSans";
  src: url(/fonts/notoSans.woff2) format("woff2"), url(/fonts/notoSans.woff)
      format("woff");
}

로컬 폰트 최적화​

local() 문법 사용​

시스템에 해당 폰트가 설치되어 있으면 리소스 요청 없이 로컬 폰트를 사용한다.

@font-face {
  font-family: "Nanum Gothic";
  src: local("NanumGothic"),
    url(/fonts/NanumGothic-Regular.woff2) format("woff2"), url(/fonts/NanumGothic-Regular.woff)
      format("woff");
}

⚠️ Pretendard와 같이 OS에 기본 포함되지 않은 폰트의 경우에는 효과가 적을 수 있다.

가변 폰트(Variable Font) 사용​

하나의 폰트 파일로 여러 굵기를 지원하기 때문에 리소스 요청이 줄어든다.

가변 폰트 예시​

const pretendard = localFont({
  src: [{ path: "../fonts/PretendardVariable.woff2" }],
  variable: "--font-pretendard",
  weight: "100 900",
  display: "swap",
});

정적 폰트 예시​

각 weight별로 별도의 요청이 발생한다.

const PretendardFont = localFont({
  src: [
    { path: "../fonts/Pretendard-Bold.woff2", weight: "700" },
    { path: "../fonts/Pretendard-Regular.woff2", weight: "400" },
  ],
});

일부 구형 브라우저에서는 가변 폰트를 지원하지 않지만, 최신 환경에서는 훨씬 효율적이다.

웹 폰트 로딩 방식​

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap"
/>

HTML 파싱과 동시에 병렬로 리소스를 요청하므로 로딩이 빠르다.

@import 방식 (비추천)​

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");

CSS가 다운로드된 이후에 파싱되기 때문에 직렬 처리로 이어져 로딩이 느리며, IE11 이하에서는 지원되지 않는다.

rel 속성설명
preload현재 페이지에서 곧 사용할 리소스를 미리 다운로드하여 캐싱
prefetch다음 페이지에서 사용할 리소스를 미리 다운로드
preconnect외부 도메인과의 연결을 미리 설정하여 네트워크 지연을 최소화
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
/>

서브셋(Subsetting)​

실제로 사용하는 글자만 포함된 폰트 파일을 생성하여 용량을 줄인다.

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/open-sans-subset.woff2") format("woff2");
  font-weight: 400;
  /* 한글 범위 */
  unicode-range: U+AC00-D7AF;
}

font-display 속성​

웹 폰트 로딩 중 텍스트 표시 방식을 제어한다.

값설명
auto브라우저 기본 동작
swap기본 폰트로 표시 후 로드 완료 시 교체
fallback로드가 느릴 경우 기본 폰트 유지
optional로드 실패 시 무시하고 기본 폰트 유지 (가장 성능 우수)

권장 조합

  • 브랜딩 폰트: font-display: swap
  • 본문 폰트: font-display: optional

요약​

항목권장 설정
폰트 포맷WOFF2
선언 순서local() → woff2 → woff
로딩 방식link
성능 향상preconnect + font-display
폰트 구조Variable Font
서브셋실제 사용하는 문자만 포함

참고 자료​