웹 폰트 최적화 기법

 

 

 

 

 

 

 

1. font preload

• 웹 페이지에서 사용되는 폰트 파일을 브라우저가 미리 다운로드하도록 지시하는 기술
• 폰트 preload를 사용하면 웹 페이지에서 폰트를 처음 요청할 때, 폰트 파일을 다운로드하는 데 필요한 시간과 대역폭을 줄일 수 있어 페이지의 성능을 향상
• 브라우저가 페이지의 렌더링을 시작하기 전에 미리 로드하므로 페이지의 성능을 향상
• 페이지에서 실제로 사용될 때 캐시되므로 불필요한 네트워크 요청을 줄임

 

<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

 

href : 폰트 파일의 경로

as : 파일 유형

type : 파일의 MIME 유형

crossorigin : 크로스 도메인에서 호스팅되는 폰트를 preload할 때 발생할 수 있는 보안 이슈를 방지

 

일반적으로 브라우저는 HTML 페이지의 파싱을 완료한 후 CSS 파일을 다운로드하고 해석한 다음, 폰트 파일을 다운로드하고 적용한다. 이 프로세스는 페이지 로딩 시간을 지연시키며, 폰트 파일의 다운로드와 적용에 따른 레이아웃 재계산은 브라우저의 성능을 떨어뜨릴 수 있다.

Font preload를 사용하면, 브라우저는 폰트 파일을 미리 다운로드하고, HTML 및 CSS 파일을 파싱하는 동안 폰트 파일을 캐시한다. 따라서 페이지에서 폰트 파일을 즉시 사용할 수 있으므로 레이아웃 계산 시간을 줄일 수 있다.

 

 

 

 

 

2. local font

• 사용하려는 폰트가 유저의 로컬에 이미 설치되어 있다면, 웹 페이지에서는 해당 로컬 폰트를 사용하는 것이 가장 효율적

font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

Helvetica Neue는 로컬에 설치된 폰트 이름이며, 해당 폰트가 없는 경우에는 대체 폰트인 Helvetica, Arial, sans-serif를 차례대로 사용된다.

 

 

 

 

 

3. font-display 속성

• 폰트가 로드될 때까지 브라우저가 기본 시스템 폰트를 사용하도록 지정
• 폰트가 로드되면 즉시 적용

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  font-display: swap;
}

body {
  font-family: 'MyWebFont', sans-serif;
}

 

 

 

 

 

4. unicode-range 속성

• 폰트를 부분적으로 다운
• 범위에 해당하는 문자만 다운

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff2') format('woff2'),
       url('myfont.woff') format('woff');
  unicode-range: U+000-5FF, U+1E00-1EFF;
}

body {
  font-family: 'MyWebFont', sans-serif;
}

U+000-5FF와 U+1E00-1EFF 범위의 문자만을 다운로드 함으로써, 폰트 파일의 크기를 줄이고, 로딩 시간을 단축할 수 있다.