[TIL] CSS: 실무에 쓰이는 웹 폰트 적용법과 트래픽 최적화 전략

 

• 웹 폰트의 개념과 생태계  - 브라우저 환경에 구애받지 않는 웹 폰트의 필요성과 상업용 무료 폰트 종류
• 폰트 확장자의 종류와 특징 - 디자인용 확장자와 웹 환경에 최적화된 압축 포맷의 차이
• 구글 웹 폰트 적용 방법 - CDN 절대 경로를 활용한 폰트 연결 및 트렌디한 폰트 탐색
• 폰트 사용 최적화 및 우선순위 - 트래픽 관리를 위한 적정 개수와 대체 폰트 선언 원리

 

 

 

 

 

웹 폰트의 개념과 폰트 생태계

웹 폰트는 사용자의 컴퓨터에 글꼴이 설치되어 있지 않아도 서버에서 폰트를 다운로드하여 동일한 디자인을 보여주는 기술이다.

현재 웹 생태계에서는 구글 웹폰트를 비롯해 네이버, 배달의민족, 현대카드 등 다양한 기업에서 고품질의 무료 폰트를 제공하고 있다.

실무에서는 트렌디하고 활용도가 높은 웹 폰트를 적절히 골라 쓰는 것이 중요하며 구글 폰트 사이트나 Fonts Knowledge 등에서 다양한 타이포그래피 정보를 얻을 수 있다.

 

 

웹 폰트 확장자의 종류와 특징

폰트를 사용할 때는 작업 환경에 맞춰 확장자를 명확히 구분해야 한다.

디자이너가 인쇄나 그래픽 툴에서 디자인 작업을 할 때는 주로 OTF나 TTF 포맷을 사용한다.

하지만 웹 개발 환경에서는 파일 용량을 줄이고 트래픽을 절약하기 위해 압축률이 우수한 WOFF나 WOFF2 포맷을 사용하는 것이 표준이다.

 

 

구글 웹 폰트 적용 방법

웹 폰트는 파일을 직접 서버에 올리는 방식보다 CDN 절대 경로를 활용해 간편하게 불러오는 방식을 주로 사용한다.

적용 과정은 먼저 구글 폰트 사이트에 접속해 원하는 폰트와 굵기를 골라 장바구니에 담는 것으로 시작한다.

이후 제공되는 코드를 복사하여 VS Code의 CSS 파일 최상단에 @import 링크로 붙여넣는다.

마지막으로 적용할 HTML 요소에 클래스를 부여하고 CSS에서 font-family 속성으로 연결한다.

 

 

웹 폰트 최적화와 트래픽 관리

한글 폰트는 조합할 수 있는 글자 수가 영어보다 훨씬 많아서 기본 용량이 상당히 크다.

무분별하게 여러 폰트를 사용하면 막대한 트래픽이 발생하고 로딩 속도가 저하되며 디자인이 지저분해진다.

웹사이트 성능을 위해 한글 폰트는 3개에서 5개 이내로 제한하는 것을 권장한다.

영문 폰트와 혼용할 경우 각각 3개에서 4개 선으로 맞추는 것이 효율적이다.

추후 원활한 유지보수를 위해 폰트 여러 개를 하나의 링크로 묶지 않고 폰트 하나당 하나의 @import 코드를 개별적으로 작성하는 것이 좋다.

 

 

폰트 우선순위 설정과 대체 폰트

네트워크 오류나 사용자 환경 문제로 설정한 웹 폰트가 정상적으로 로드되지 않을 위험이 있다.

이러한 글꼴 깨짐 현상에 대비하기 위해 font-family 작성 시 우선순위 설정이 필수적이다.

가장 보여주고 싶은 주서체를 맨 앞에 적고 쉼표로 구분하여 차선책인 보조서체를 차례로 나열한다.

마지막에는 sans-serif(고딕계열)나 serif(명조계열) 같은 기본 글꼴 형태를 명시하여 전체적인 디자인 틀이 무너지지 않도록 처리한다.

 

 

실무 적용 예시와 속성

CSS

@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&display=swap');

 

위 코드는 구글 웹 폰트 CDN을 활용한 절대 경로 연결 방식의 예시이다.

폰트가 로딩되는 동안 텍스트가 보이지 않는 현상을 방지하기 위해 display=swap 속성을 적용하여 사용자 경험을 개선한다.

 

 

 

 

구글 웹 폰트

폰트 다운로드 링크

https://fonts.google.com/

 

 

 

실무 활용도가 높은 구글 웹폰트 10가지와 실무 꿀팁

https://haehaee.tistory.com/37

[Study] 가장 트렌디하고 실무 활용도가 높은 구글 웹폰트 10가지