백엔드 개발자 주제에 프론트에 보이는 화면에 집착이 많은 나는 이제 유일하게 남은 풀스택 개발 페이지에 내 남은 집착을 쏟아내고있다.
기존 적용되어 있던 Notosans 를 Pretendard로 변경하는 작업을 진행 중 겪은 이슈 들을 적어놓는다.

woff? woff2?

Web Open Font Format의 줄임말로 웹폰트에 최적화된 파일 형식
숫자가 더 높으니 woff2가 더 좋은거겠지? 역시 기존 woff보다 30~50% 압축률이 더 좋은 포맷 (단, IE미지원)

폰트 반영까지 흔들리는 화면

FOIT(Flash Of Invisible Text)

• 폰트 반영 전까지 폰트가 안보이는 현상 (지양)

FOUT(Flash Of Unstyled Text)

• 기본 폰트로 보이다 로딩 후 폰트가 변환되는 현상 (이래서 흔들림😶)

해결방법 : preload 옵션으로 폰트를 먼저 로딩시켜 해결 (최적화가 맞다곤 확신못함)

<link rel="preload" href="./fontname.woff2" as="font" type="font/woff2" crossorigin="anonymous"/>

같은 font-weight 다른 두께 (Mac / Windows)

디자인에서는 regular 폰트를 썼는데 맥에서 font-weight: 400주면 너무 두꺼워 보이는것..
개발환경이 맥+크롬이다 보니 내눈에 이뻐보이라고 font-weight:300으로 주고 작업했더니 세상에 윈도우+크롬에서 글씨가 너무 얇아
이것저것 검색중에 발견한 옵션

-webkit-font-smoothing: antialiased;

세상에 저거 한줄 넣었다고 맥+크롬에서 400을 해도 이뿌게보인다ㅠ_ㅠ