web font vs local font

웹 폰트란?

방문자의 로컬 컴퓨터에 폰트 설치 여부와 상관 없이 온라인의 특정 서버에 위치한 폰트 파일을 다운로드하여 화면에 표시해주는 웹 전용 폰트이다.

예를 들어, 나눔고딕 폰트를 사용하고 싶은데 PC에 설치가 안 되었다면 기본 폰트인 돋움 글꼴이 노출되고, 나눔고딕 폰트가 설치된 pc에서는 나눔고딕 폰트가 노출된다. 그러나, 웹 폰트를 사용할 경우 방문자의 pc에 나눔고딕 폰트가 있든 없든 나눔고딕 폰트가 노출된다.

로컬 폰트는 또 뭔데?

로컬폰트 폰트를 불러올 때 @font-fac CSS코드를 사용해서 코드를 정의하는 기법을 이야기한다. 아래 코드를 보면

@font-face {
  font-family: <a-remote-font-name>;
  src: <source> [,<source>]*;
  [font-weight: <weight>]; // font 굵기 값
  [font-style: <style>]; // font 스타일 값
}

<a-remote-font-name> 에는 폰트명으로 지정할 이름을 넣어주면 되고.
<source> 에는 원격 폰트 파일의 위치를 나타내는 url 값을 지정하거나 사용자 컴퓨터에 설치되어 있는, 즉 로컬 환경에 있는 폰트명을 local("Font Name") 형식으로 지정하면 된다.

만약 로컬 환경에 있는 폰트를 지정하려면 src: local('Font Name') 과 같은 형식으로 폰트를 지정해 주면 된다.

FOUT, FOIT 현상

우리가 처음 사이트에 진입했을 때, 글자가 늦게 뜨거나 폰트가 나중에 적용되는 현상을 본 적이 있을 것이다.

FOIT(Flash Of Invisible Text)은 브라우저가 폰트를 다운로드하기 전까지 글자가 보이지 않는 것을 의미하고, FOUT(Flash Of Unstyled Text)은 브라우저가 폰트를 다운로드학 전까지 폰트가 적용되지 않는 것을 의미한다. 즉, FOIT은 글자 자체가 보이지 않는 것이고 FOUT은 폰트가 적용이 되지 않아 초기화된 폰트로 글자가 보이는 것을 말한다.

그렇다면 위 두가지 현상은 도대체 왜 일어나는 것일까?
그 이유를 알기 위해서는 먼저 브라우저가 어떻게 동작하는지 알아야할 필요가 있다.

브라우저는 웹 페이지를 어떤 순서로 띄우는가?

아래 그림은 브라우저가 렌더링할 때, 정보를 요청하는 어떤 순서를 나타낸다.

T0	브라우저가 HTML 문서를 요청한다.
T1	- HTML 응답이 오면 DOM 구성을 시작한다. - 브라우저가 CSS, JS 및 기타 리소스를 요청한다.
T2	- 모든 CSS 콘텐츠를 수신한 뒤, CSSOM을 구성한다. - 그 후 CSSOM을 DOM 트리와 결합시켜 렌더링 트리를 구성한다. - 이 시점에, 폰트 리소스를 요청한다.
T3	- 콘텐츠를 화면에 그린다. - 이때, 폰트를 사용할 수 없는 상태면 브라우저는 글자를 렌더링하지 않을 수도 있다. - 하지만 폰트를 사용할 수 있다면 글자를 그린다.

순서설명순서설명위에 순서를 보면 알 수 있듯이 폰트소스를 요청하는 시점은 T2에서 T3으로 넘어가는 시점으로 다른 리소스요청보다 그 시기가 확연히 늦다. 이러한 시기 차이 때문에 콘텐츠를 화면에 그리는 동안 폰트 리소스 응답이 늦어지면 FOIT, FOUT가 발생하는 것이다.웹 폰트를 최적화 시켜보자 "preload"앞서 브라우저 동작을 살펴봤듯이 폰트 리소스 요청은 다른 리소스 요청보다 늦게 시작한다. 그렇기 때문에, 브라우저가 렌더링하는 동안 폰트 리소스 응답이 늦어져 폰트가 적용되지 않는 것이다. 그렇다면, 폰트 리소스 요청 시점을 당기면 어떨까?그것을 가능케 해주는게 바로 바로 **`preload`** 를 설정하는 기법이다. preload를 설정하면 페이지가 렌더링되는 초기에 폰트 리소스를 요청할 수 있따.사용 방법은 간단하다. ``에서 폰트를 요청할 때, `rel=”preload”`를 추가하면 된다.🤔 그렇다면 웹 폰트를 불러올 때는 항상 preload를 사용하는게 좋은걸까?
그건 또 아니다. 항상 예외는 존재하는 법, 일반적으로 브라우저는 현재 페이지에서 필요한 폰트만 다운로드한다. 만약 많은 양의 폰트를 preload하게 되면 로딩 시간이 길어져 사용하는 의미가 없어지게 된다.

웹 폰트를 최적화 시켜보자 "preload"

앞서 브라우저 동작을 살펴봤듯이 폰트 리소스 요청은 다른 리소스 요청보다 늦게 시작한다. 그렇기 때문에, 브라우저가 렌더링하는 동안 폰트 리소스 응답이 늦어져 폰트가 적용되지 않는 것이다. 그렇다면, 폰트 리소스 요청 시점을 당기면 어떨까?

그것을 가능케 해주는게 바로 바로 **`preload`** 를 설정하는 기법이다. preload를 설정하면 페이지가 렌더링되는 초기에 폰트 리소스를 요청할 수 있따.

사용 방법은 간단하다. ``에서 폰트를 요청할 때, `rel=”preload”`를 추가하면 된다.

🤔 그렇다면 웹 폰트를 불러올 때는 항상 preload를 사용하는게 좋은걸까?
그건 또 아니다. 항상 예외는 존재하는 법, 일반적으로 브라우저는 현재 페이지에서 필요한 폰트만 다운로드한다. 만약 많은 양의 폰트를 preload하게 되면 로딩 시간이 길어져 사용하는 의미가 없어지게 된다.