[프론트엔드 최적화] 폰트 최적화 -2 (폰트 사이즈 줄이기)

 

폰트 포맷

TTF / OTF	거의 압축이 되지 않은 형태
WOFF	TTF / OTF 형식의 큰 용량을 줄이고, 효율적으로 사용하기 위해 만들어짐
WOFF2	위의 WOFF 방식보다 더 효율적인 사용을 위해 만들어짐
EOT	IE에서만 지원

 

폰트 포맷 변환 사이트

https://transfonter.org/

Online @font-face generator

 

App.css에 적용

@font-face {
	font-family: '폰트명';

	//만약 해당 폰트가 로컬에 있다면 그걸 사용
	local('폰트명'),

 	//맨 처음 다운로드 받을 폰트 파일
 	src: url('경로/폰트명.woff2') format('woff2'),
	
	//처음 것을 다운받는 데 실패했을 때 대체할 폰트 파일
	src: url('경로/폰트명.woff') format('woff'),
    
	//위의 2개를 다운받는 데 실패했을 때 대체할 폰트 파일
	src: url('경로/폰트명.ttf') format('truetype');
}

 

폰트 사이즈 줄이기(Subset)

내가 사용하고자 하는 글자만 font로 변환해서 사용

ABCED만 포함된 폰트가 생성된다

 

 

Unicode range

@font-face {
	...
    unicode-range: u+0041 /* A */
}

유니코드로 명시된 글자만 로딩하고, 명시된 글자가 아닐 시 리소스를 아예 로딩하지 않는 방법

unicode-range는 글자만으로도, 범위로도 설정이 가능하다.