웹 최적화

• 이미지 최적화
• 동영상 최적화
• 폰트 최적화
• 폰트 적용 시점 컨트롤
• 폰트 사이즈 줄이기 (확장자)
• 로컬 폰트 사용하기
• 폰트 사이즈 줄이기 (Subset)
• 불필요한 폰트 파일 요청 방지
• data-url 적용

font-display: block;

웹에서 폰트를 적용할 수 있는 파일의 확장자는 여러가지가 있다.

가장 일반적으로 알고있는 TTF/OTF부터 WOFF, WOFF2, EOT가 있다.

아래를 보면 이미지, 동영상 최적화에서 알 수 있듯 확장자마다 파일 크기가 다르다.

https://transfonter.org/

우선 위 링크를 통해 내가 사용했던 폰트의 확장자를 바꿔보고 파일 크기를 확인했다.

src: local('TEST'),
			url('test.woff2') format('woff2'),
			url('test.woff') format('woff'),
			url('test.ttf') format('truetype');

https://transfonter.org/

위 링크에서 특정한 문자만 포함한 폰트 파일을 출력할 수 있다.

unicode-range: u+0041, u+0042;

unicode-range는 해당되는 글자만 font를 적용하는 방법

Base64 Encode

CSS에 Font를 담아 불러오는 방식

2번의 호출을 1번의 호출로 줄이는 효과가 있어 네트워크 환경이 좋지않거나 네트워크 통신이 많다면 효과를 볼 수 있다.