Web Font 최적화

2023.01.15

웹사이트에서 폰트를 사용할때, 폰트 파일종류나 해당 폰트를 불러오는 방식에 따라서 페이지에 영향을 준다.

폰트 최적화를 잘못할 경우 FCP(First Contentful Paint)가 늦어지거나 렌더링 후 폰트가 감빡이면서 바뀌는 현상을 볼 수 있다.

웹 서비스에서 폰트를 불러오는 방식을 개선 시켜서 성능을 개선시키는 방법도 있는데, pre-rendering과 같이 미리 폰트를 불러오게 해서 사용하는 경우, 폰트를 사용하는 페이지가 많아지면 폰트 파일이 많아져서 페이지 로딩속도가 느려질 수 있다.

궁극적으로 폰트 자체의 용량을 줄이지 않으면 성능을 개선 시킬 수 없다는 것을 알았다.

폰트 파일의 종류

eot : Embedded OpenType

IE 브라우저에서 사용하는 폰트 파일
ttf : TrueType Font

글꼴이 압축이 되지 않아서 파일 크기가 크다.
otf : OpenType Font

ttf와 비슷하지만, 더 많은 글꼴을 포함할 수 있다. 하지만 압축이 되지 않아서 파일 크기가 크다.
woff : Web Open Font Format

대부분의 브라우저에서 지원하며 압축 기능이 있어서 파일 크기가 작다.
woff2 : Web Open Font Format 2

woff보다 더 압축률이 좋아서 파일 크기가 더 작다.

https://caniuse.com/ 에서 브라우저별로 지원하는 폰트 파일을 확인할 수 있다.

위와 같이 각 폰트 파일 형식은 브라우저별로 지원하는 폰트 파일이 다르기 때문에 하나의 파일만 사용하지는 않고 아래와 같이 적용해서 다양한 브라우저에서 사용할 수 있도록 한다.

@font-face {
  font-family: 'NanumSquare';
  src: url('NanumSquare.eot');
  src: url('NanumSquare.eot?#iefix') format('embedded-opentype'),
       url('NanumSquare.woff2') format('woff2'),
       url('NanumSquare.woff') format('woff'),
       url('NanumSquare.ttf') format('truetype');
}

그렇기 때문에 사실 폰트 파일의 종류는 우선순위에 문제이지 사실 큰서비스를 운영하게 되면 여러 폰트를 모두 지원해야한다.

최적화된 폰트 찾기

1. Variable font (가변형 폰트)

폰트 파일을 보면 font-weight에 따라서 파일이 나누어져 있다.

예를들면 NanumSquare 폰트는 NanumSquare-Regular, NanumSquare-Bold, NanumSquare-ExtraBold 등이 있다.

이렇게 폰트가 font-weight값에 따라서 파일이 나누어진 이유로는 하나의 파일로 font-weight를 적용하면 글자의 모든 선이 두꺼워지면서 알아보기 힘든 단어가 생길 수 있기 때문이다.

그렇기 때문에 Variable Font(가변형 폰트)를 사용하면 하나의 파일로 여러 font-weight를 지원할 수 있다.

이 두사진의 경우 같이 하나의 폰트에 font-weight를 적용하면 폰트가 깨지게 되어서 여러 font-weight, font-style을 별 폰트를 사용해야한다.

하지만 그렇게 될 경우 폰트 용량이 배로 커지게 되기 때문에 가변형 폰트를 사용하여 하나의 폰트 파일로 여러 font-weight를 지원할 수 있다.

가변형 폰트 참고 사항

https://v-fonts.com/ > https://fonts.google.com/knowledge/introducing_type/introducing_variable_fonts

2. Subset font

한글의 경우 알파벳과 달리 조합의 경우의 수가 많아서 1만자가 넘는 폰트를 담게되면 용량이 큰 TTF의 경우 2MB가 넘어가는 경우가 있다.

그렇기 때문에 사용하는 글자만 따로 뽑아서 subset font를 만들어서 사용하면 용량을 줄일 수 있다.

대부분의 한글 폰트는 이 Subset font를 제공하는데 용량은 1/5 수준까지 줄어든다.

subset font를 사용할때는 다음과 같이 사용한다.

@font-face {
  font-family: "Pretendard Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 45 920;
  src: local("Pretendard Variable"),
    url(../../../public/fonts/pretendard/PretendardVariable.subset.0.woff2)
      format("woff2-variations");
  unicode-range: U+f9ca-fa0b, U+ff03-ff05, U+ff07, U+ff0a-ff0b, U+ff0d-ff19,
    U+ff1b, U+ff1d, U+ff20-ff5b, U+ff5d, U+ffe0-ffe3, U+ffe5-ffe6;
}

unicode-range를 사용하여 해당 페이지에서 사용하는 글자만 뽑아서 다운로드하게 된다.

위 이미지에서 보면 subset 폰트를 사용한 pretendard 폰트와 aritaburi 폰트와의 용량의 차이가 확연히 들어 나는 것을 볼 수 있다.

가장 사용하기 좋은 폰트

가장 사용하기 좋은 폰트로는 Pretendard가 있다. 많은 서비스들이 해당 폰트를 사용하고 있으며, 해당 폰트는 위에서 폰트의 용량을 줄이기 쉬운 가변형 subset font를 제공하고 있으며 무료로 이용가능한 폰트이다.

pretendard : https://github.com/orioncactus/pretendard