Font를 Preload하는 방법

여러 사이트에서 사용되는 폰트를 크게 나누면 웹 폰트와 로컬 폰트가 있다.

 

웹 폰트

• 서버에서 제공하는 폰트 파일을 사용해 렌더링하므로 로딩 시간이 있다.

preload 속성을 사용하여 폰트 파일을 미리 다운받아 놓고 사이트에 방문할 때마다 폰트를 렌더링하지 않게 많들어 로딩 속도를 향상시키는 Font Preload 방식을 사용하면 웹 폰트의 단점을 보완할 수 있다.

 

 

웹 폰트를 최적화 하는 방법

 

1. HTML에서 link 태그 preload 옵션을 사용하기

 <link
    rel="preload"
    href="fonts/cicle_fina-webfont.woff2"
    as="font"
    type="font/woff2"
    crossorigin />

rel = "preload" 속성을 사용하여 웹 폰트를 미리 다운로드하면, 사이트 방문 시 폰트를 렌더링하지 않아도 되기 때문에 로딩 속도가 향상된다. 하지만 너무 많은 폰트를 preload 하면 로딩 시간이 길어진다.

 

 

2. CSS 에서 font-display 속성 사용하기

font-display 속성을 사용하여 외부 라이브러리 없이도 웹 폰트의 로딩 상태에 따른 동작을 설정할 수 있다.

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format("woff"), url(/path/to/fonts/examplefont.eot)
      format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

swap 속성을 사용하면 웹 폰트 로딩과 상관없이 텍스트가 먼저 보이고, 웹 폰트 로딩이 완료되면 지정되었던 폰트가 적용되게 해준다. 이렇게 웹 폰트의 로딩과 상관없이 일단 글이 화면에 보이는 것을 FOUT 이라 한다. 폰트가 로딩이 완료되지 않으면 글 자체가 보이지 않는 것을 FOIN 이라고 하는데, 이렇게 처음부터 글이 작성되지 않으면 사용자에게 내용을 전달할 수 없기 때문에 swap 속성을 사용한 FOUT 방식으로 폰트를 최적화 시킬 수 있다.

 

 

3. 서브셋 폰트를 사용한다.

파일에 사용되지 않는 글자를 제외하고 사용하는 글자만 남겨둔 것을 서프셋 폰트라고 한다. '갫, 촓, 뢃, 갏' 등의 사용하지 않는 조합을 제외한 폰트 파일을 사용하면 용량이 줄어들어 최적화가 가능하다.

 

---

 로컬 폰트

• 폰트 파일이 사용자의 기기에 이미 다운되어 있어 로딩 속도가 빠르다.
• 사용자의 기기에 해당 폰트 파일이 없다면 대체 폰트를 사용하게 되고 페이지의 디자인이 깨질 수 있다.

 

로컬 폰트 사용하는 방법

 

1. CSS 의 @font-face 를 사용한다.

로컬 폰트는 이미 기기에 다운되어 있기 때문에 CSS의 font-face 를 사용하여 로컬 폰트를 불러올 수 있다.

@font-face {
  font-family: 'Nanum Gothic';
  src: local('Nanum Gothic'), local('NanumGothic'), url('NanumGothic.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

 local() 함수는 로컬 폰트를 참조하며, url() 함수는 웹 폰트 파일의 경로를 지정한다.