[프론트엔드] 폰트 쓰다 겪는 문제들 해결법

개발하면서 폰트를 끌어다 쓸 때 생각지 못한 다양한 문제가 생기곤 합니다.
아래는 그러한 문제들의 해결법입니다.

---

기본 폰트 뭐 쓰나요?

대부분의 상황에서 기본 폰트는 "Noto Sans"와 "Pretendard"입니다.
이 폰트들이 애용되는 이유는 상업적으로 사용할 수 있는 무료 폰트이면서 깔끔하고 가독성이 좋기 때문입니다.

Noto Sans 사용 시 주의사항:

• Noto Sans의 경우 다양한 언어로 폰트가 존재합니다.
  국문, 영문, 중국어, 일본어 등.
  여기서 주의해야 하는 점은 국문의 영어와 한자가 영문의 영어와 중국어와 일본어의 한자와 다르다는 점입니다.
  이 점을 몰라서 디자이너와 폰트가 같네 다르네 말이 나옵니다.
  만약 미묘하게 영어나 한자 폰트가 다르다면 다른 언어의 "Noto Sans" 폰트를 가져와서 사용해 보시기를 바랍니다.

---

웹 폰트? 폰트 파일 다운로드해서 사용?

폰트를 쓰는 가장 간단한 방법은 구글 폰트에서 웹 폰트로 가져오는 방식입니다.
간단한 개인 포트폴리오를 사용할 때는 위 방식도 추천드리나 정식 프로젝트는 항상 폰트를 다운로드하여서 사용하시는 것을 권장드립니다.

이유는 아래와 같습니다.

• 만에 하나 폰트를 불러올 수 없게 되었을 때 Arial이나 맑은 고딕 같은 폰트로 돌아가면서 디자인이 깨집니다.
  전쟁, 서버 오류로 폰트 회사에 문제가 있을 수 있습니다.
• 웹에서 폰트를 불러오기 때문에 느립니다.

---

WOFF2 형식의 폰트 사용하기

폰트는 다양한 형식이 있습니다.
그중에서 WOFF2라는 형식을 사용하시는 것을 권장드립니다.

실제 사용 예시:

@font-face { 
    font-family: 'Pretendard'; 
    font-display: auto; 
    src: local('Pretendard'), url('/fonts/PretendardVariable.woff2') format('woff2'); 
}

• WOFF2 폰트의 가장 큰 장점은 적은 용량입니다.
  생각보다 폰트가 무겁기 때문에 디자이너가 다양한 폰트로 사이트를 꾸미려 한다면 사이트가 느려질 수 있다고 말씀드려야 합니다. 
  (사이트가 엄청 느려지기보다는 최초 폰트가 느리게 로딩되기 때문에 사이트가 무겁다는 느낌을 줍니다.)
  실제 사용하기에 폰트의 다양성은 4개 이하가 좋을듯합니다.

---

Variable Font(가변 폰트) 사용하기

Variable Font는 레귤러, 미디움, 볼드와 같이 딱딱 정해져 있지 않은 폰트입니다.
저희가 보통 사용하는 레귤러, 500, 볼드 등을 떠나 450, 339 등 자유로운 두께의 폰트를 설정할 수 있습니다.

Variable Font(가변 폰트)의 장점:

• 폰트의 두깨를 세밀하게 지정할 수 있다.
• 하나의 폰트 파일로 다양한 두께의 폰트를 사용할 수 있다.
  가끔 레귤러, 볼드를 따로 써야 하는 폰트들이 있습니다.
• 폰트에 transition을 주었을 때 자연스럽게 폰트가 두꺼워지고 얇아집니다.

---

아이폰에서 폰트가 두꺼울 때

윈도우와 안드로이드에서는 폰트가 잘 나오는데 아이폰에서 갑자기 폰트가 두껍게 나올 때가 있습니다.
그때는 아래 코드를 사용하면 해결할 수 있습니다.

div {
    font-shnthesis: none;
    /* body에 걸거나 해당 요소에만 걸 수 있습니다. */
}

font-synthesis는 폰트를 합성할 수 있는 CSS 속성입니다.
국문이나 한자 등은 획이 많아 브라우저의 합성으로 인해 가독성이 떨어질 때가 있습니다.
이를 방지하기 위한 속성입니다.

간단하게 말하면 font-weight나 font-style을 적용하거나 풀 수 있는 속성이라고 볼 수 있습니다.

아이폰에서는 폰트 합성이 기본값으로 되어 있어서 위 CSS로 해당 설정을 해제할 수 있습니다.

---

폰트를 불러올 때 로딩이 걸린다면? 

@font-face { 
    font-family: 'Pretendard'; 
    font-display: auto; 
    /* auto로 설정하면 폰트가 다 불러와진 후 글자가 보입니다. */
    src: local('Pretendard'), url('/fonts/PretendardVariable.woff2') format('woff2'); 
}

위에도 보여드렸던 코드입니다.
여기서 주의 깊게 보실 속성은 "font-display: auto;"입니다.

폰트를 불러올 때 다소 로딩이 있어서 사이트 진입 시 시스템 기본 폰트에서 설정한 폰트로 바뀌고는 합니다.
생각보다 폰트가 바뀌어지는 모습이 사이트의 전체적인 인상을 크게 저하시킵니다.
그렇기 때문에 폰트의 기본 설정은 꼭 위와 같이 설정하시기를 권장드립니다. 

---

참고 문헌

font-synthesis - CSS: Cascading Style Sheets | MDN