우선적으로 '웹 폰트 최적화가 왜 필요한가?' 이것이 궁금하다면 아주 잘 정리된 글이 있으니 참고 바랍니다.
폰트 코드 상황
우선적으로 나의 상황은 ttf파일들을 다운 받아서 src/Fonts/(각 폰트 이름)/(폰트이름).ttf 경로로 저장해놓고 Font.css파일을 만들어서
@font-face {
font-family: "폰트 이름";
src: url("폰트경로.ttf") format("typetrue");
}이런 형식으로 저장을 한뒤에 사용할 컴포넌트에 import 해와서 font-family : "폰트이름"
이러한 형식으로 폰트를 사용하고 있엇다.
사실 폰트가 웹 성능에 영향을 미칠거라는건 생각조차 못하고 있엇는데 Lighthouse를 돌려보니 폰트 사이즈가 눈에 들어온것이다.
사실 생각해보면 대부분 웹 사이트들은 텍스트(폰트)와 이미지가 절반이상을 차지하는데 당연한 것이엿다.
폰트 성능 최적화
폰트 성능도 한번 최적화 해보자 마음먹은뒤에 구글링을 열심히 하던중 좋은글(상단 링크을 발견하여 자세히 읽어보고 원래 사용하던 ttf파일들을 woff, woff2로 변환해주었다.
이 과정이 정말 고역이엿는데 변환 사이트는 많았지만 오류, 파일적용이 안됨, woff2가 없는경우 등이 있어서 각각 찾아주느라 애를 먹었다.
이제 woff, woff2파일들을 전부 준비했으니 적용을 할 차례이다.\
woff2의 선언 방식은 다음과 같다.
@font-face {
font-family: "폰트이름";
src: url("폰트경로.woff2") format("woff2");
font-display: swap;
}여기서 font-display: swap;은 왜 넣은거지? 라고 생각할 수 있는데
이 코드의 역할은 폰트 파일이 다운로드되기 전까지 기본 시스템 폰트 또는 다른 대체 폰트로 텍스트를 표시한 다음, 폰트 파일이 로드되면 폰트를 교체하는 역할을 한다.
font-display: block, font-display: optional 이라는 규칙이 있는데 선언하지 않으면 font-display: optional이 적용되는듯 하다.
상단 링크의 FOIT과 FOUT에 관련되어 있는듯 하다.
폰트 미리 연결하기
상단 링크 글에보면 html환경에서 연결하는 예제가 있기때문에 리액트+타입스크립트+스타일드컴포넌트 환경인 나에게는 적용되지 않는 예제였다.
하지만 다 방법이 있는법 이리저리 넣다보니 성공하였는데 이러한 형식으로 넣어주면 되는듯 하다.
<Link to="/경로">
<a style={{ fontFamily: "Pretendard-Bold" }}></a>
</Link>
a태그를 이용하여 미리 폰트를 연결해주는 방법이다.
