SVG는 잘 사용되지 않고 나머지 4가지 형식이 주로 사용된다.
파일 크기 : EOT > TTF/OTF > WOFF > WOFF2
https://transfonter.org 에서 폰트 포맷 변환 가능
1.9mb ttf파일 약 791kb(woff), 451kb(woff2) 크기로 압축
css에 적용
woff2와 woff를 지원하지 않는 브라우저까지 고려하여 다음과 같이 코드 작성.
format()
을 쓰지 않으면 브라우저는 지원가능한 파일 형식이 나올 때까지 순서대로 다운받으므로 꼭 써야한다.
로컬에 이미 폰트가 설치되어있을 수도 있다. 이 때에는 따로 다운로드를 하지 않고 바로 적용이 가능하므로 다음과 같이 코드를 작성하였다.
local('폰트 이름')
폰트 전체가 아닌 필요한 글자의 폰트만 가지고 오는것.
https://transfonter.org 에서 subsets으로 해당 언어를 선택 할 수도 있고, Characters에 필요한 글자(대소문자 구분 필요) 만 입력하여 변환을 할 수 있다.
subset을 사용할 때 해당 글자가 없음에도 불구 하고 css에서 폰트를 불러왔기 때문에 Network에서 폰트를 다운받는 경우가 있다. 이러한 비효율적인것을 막기 위해 css 특성인 unicode-range
를 사용 할 수 있다.
unicode-range
로 지정된 유니코드에 대해서만 폰트를 적용하고 불러온다.
파일로 불러오던것을 data uri를 사용해 불러오는 방법.
https://transfonter.org Base64 encode 설정 켜주면 된다.
하지만 이 방법을 사용했을 경우 아래와 같은 문제점들이 있다.
출처: https://velog.io/@vnthf/웹폰트-최적화-하기, https://www.inflearn.com/course/웹-성능-최적화-리액트-2
css보다 먼저 이 폰트가 이 페이지에서 필요하다는것을 알려주고 먼저 불러오므로 FOUT와 FOIT가 없어진다.
html이 로드 되면서 바로 불러와짐으로 css나 JS와 같은 다른 리소스들 보다 먼저 로드됨.
<link rel="preload" href="폰트이름.woff2" as="font" type="/static/font_name.woff2" crossorigin/>