최적화(4) - 폰트 사이즈 줄이기

Jin·2022년 6월 10일
0

최적화

목록 보기
5/5

폰트 사이즈 줄이기

1. 브라우저별 폰트 포맷

SVG는 잘 사용되지 않고 나머지 4가지 형식이 주로 사용된다.

  • EOT : IE8 이하일 경우
  • TTF : 구형 안드로이드버전(4.4)에서 필요
  • WOFF : 대부분의 모던 브라우저에서 지원. TTF보다 압축률이 좋음
  • WOFF2: WOFF보다 압축률이 30% 정도 더 좋다.

파일 크기 : EOT > TTF/OTF > WOFF > WOFF2

https://transfonter.org 에서 폰트 포맷 변환 가능

1.9mb ttf파일 약 791kb(woff), 451kb(woff2) 크기로 압축

css에 적용
woff2와 woff를 지원하지 않는 브라우저까지 고려하여 다음과 같이 코드 작성.
format()을 쓰지 않으면 브라우저는 지원가능한 파일 형식이 나올 때까지 순서대로 다운받으므로 꼭 써야한다.

2. local 폰트 사용

로컬에 이미 폰트가 설치되어있을 수도 있다. 이 때에는 따로 다운로드를 하지 않고 바로 적용이 가능하므로 다음과 같이 코드를 작성하였다.
local('폰트 이름')

3. subset 사용

폰트 전체가 아닌 필요한 글자의 폰트만 가지고 오는것.

https://transfonter.org 에서 subsets으로 해당 언어를 선택 할 수도 있고, Characters에 필요한 글자(대소문자 구분 필요) 만 입력하여 변환을 할 수 있다.

4. unicode-range

subset을 사용할 때 해당 글자가 없음에도 불구 하고 css에서 폰트를 불러왔기 때문에 Network에서 폰트를 다운받는 경우가 있다. 이러한 비효율적인것을 막기 위해 css 특성인 unicode-range를 사용 할 수 있다.
unicode-range로 지정된 유니코드에 대해서만 폰트를 적용하고 불러온다.

5. Data-uri 변환

파일로 불러오던것을 data uri를 사용해 불러오는 방법.
https://transfonter.org Base64 encode 설정 켜주면 된다.

하지만 이 방법을 사용했을 경우 아래와 같은 문제점들이 있다.

  • foit와 fout가 방지됨
  • CSS 파싱이 블락 됨. 렌더링이 상당히 지연.
  • 한글 폰트의 경우는 크기가 커서 속도도 오히려 더 느림

출처: https://velog.io/@vnthf/웹폰트-최적화-하기, https://www.inflearn.com/course/웹-성능-최적화-리액트-2

폰트 Preload

css보다 먼저 이 폰트가 이 페이지에서 필요하다는것을 알려주고 먼저 불러오므로 FOUT와 FOIT가 없어진다.
html이 로드 되면서 바로 불러와짐으로 css나 JS와 같은 다른 리소스들 보다 먼저 로드됨.

<link rel="preload" href="폰트이름.woff2" as="font" type="/static/font_name.woff2" crossorigin/>
  • as와 crossorigin이 있어야 두번 다운로드 하지 않는다.
  • 사용 여부와 관계없이 무조건 리소스를 받으므로 화면에 꼭 필수적인 폰트를 로딩해야 할때 사용하는것이 좋다.
profile
내가 다시 볼려고 작성하는 블로그. 아직 열심히 공부중입니다 잘못된 내용이 있으면 댓글로 지적 부탁드립니다.

0개의 댓글