옥소폴리틱스

웹폰트 최적화

테오구 2022. 10. 19. 22:54
728x90

웹 폰트란?

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

 

기본 사용법

font-face 규칙에는 다음과 같은 두 가지 세부 속성을 설정합니다.

  • font-family: 사용할 웹 폰트의 이름을 지정합니다. 이 이름은 폰트 파일의 이름과 일치하지 않아도 상관없습니다. 하지만 비슷하게 설정하는 것이 유지 보수에 좋습니다.
  • src: 폰트 파일의 경로와 폰트의 형식을 지정합니다. url에 폰트 파일의 경로를 설정하고, format에 폰트 파일의 형식을 설정합니다.

웹 폰트의 렌딩 방식

Foit : 웹폰트가 로드될 때까지 텍스트를 렌더링 하지 않다가 로드가 된 이후에 텍스트를 보여주는 동작입니다.

Fout : 웹폰트가 로드될 때따지 시스템의 기본 폰트를 보여주고 이후 flow해서 글꼴을 대체하는 방식

 

기본적으로 브라우저마다 폰트 렌더링 방식이 다르다.

Firefox와 Chrome Foit방식을 IE와 Edge는 FOUT방식으로 렌더링이 됩니다.

 

FOIT 방식은 Mitt Romney 사례와 같이 텍스트가 보이지 않는 문제가 있기 때문에 UX 관점에서 좋지 않습니다.

그러므로 모든 브라우저에서 FOIT 방식이 아닌 FOUT 방식으로 작동하게 한다면 텍스트가 보이지 않는 문제를 해결할 수 있습니다.

웹폰트 최적화

확장자 선택

 

font-display 

  • auto 옵션은 브라우저의 기본 동작에 맡기는 방식입니다.
  • block 옵션은 FOIT와 동일하게 작동하는 옵션이다. 웹 폰트가 로딩되지 않았을 때는 텍스트를 렌더링 하지 않습니다(최대 3초). 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다.
  • swap 옵션은 FOUT와 동일하게 작동하는 옵션으로 우선 폴백 폰트로 글자를 렌더링 하고, 웹 폰트 로딩이 완료되면 웹 폰트를 적용합니다. 웹 폰트 로딩 여부와 관계없이 항상 텍스트가 보입니다.
  • fallback 옵션을 사용하면 우선 100ms 동안 텍스트가 보이지 않고, 그 후 폴백 폰트로 렌더링 합니다. 특이한 점은 약 2초의 전환(swap) 시간이 있다는 점인데 이 시간 안에 로딩이 완료되면 웹 폰트로 전환합니다. 하지만 이 시간이 지나면 웹 폰트 다운로드가 완료되어도 웹 폰트로 전환하지 않고 폴백 폰트를 유지합니다. 전환 시간 이후에 다운로드된 웹 폰트는 웹 페이지에 적용되지는 않지만 캐시에는 저장됩니다. 그래서 추후에 사용자가 다시 방문했을 때 바로 웹 폰트가 적용된다는 장점이 있습니다.
  • optional 옵션은 fallback 옵션과 비슷하지만 다르게 작동하는 옵션입니다. 우선 100ms 동안 텍스트가 보이지 않고 그 후 폴백 폰트로 전환합니다. 웹 폰트를 다운로드하지만 브라우저가 네트워크 상태를 파악해 웹 폰트 전환 여부를 결정한다는 점이 이 옵션의 특이한 점으로 예를 들어 네트워크의 연결 상태가 안 좋으면 웹 폰트의 다운로드가 완료되어도 캐시에 저장만 하고 전환은 하지 않습니다.

 

preload 옵션으로 먼저 로딩하기

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

 

Base64 인코딩

@font-face {
  font-family: 'NotoSans_Regular';
  src: url('data:font/woff2;charset=utf-8;base64,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')
      format('woff2'),
    url('data:font/woff;charset=utf-8;base64,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')
      format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: optional;
}

body {
  font-family: 'NotoSans_Regular';
}

솔직히 필자는 위의 preloading보다 base64로 인코딩하는 방식을 좋아한다.

 

base64로 인코딩한 결과
preloading로 불러온 결과

fast 3g로 비교해보면 base64인코딩의 경우 네트워크 요청을 거의 거치지 않기 때문에 더 빠르게 로딩 된다.

728x90