[성능최적화] 웹폰트 최적화 가이드

소정·2023년 12월 17일

CSS web font 성능최적화

성능최적화

목록 보기

2/2

🚨 font 종류

1. 종류

system font

사용자 운영체제(Windows, macOS, Linux 등)에 미리 설치된 기본 폰트
사용자 운영체제에 따라 다르고, 시스템에서 자동으로 제공되므로 따로 저장할 필요가 없음
개발자가 별도의 폰트를 지정하지 않으면 시스템 폰트가 기본적으로 사용됨

local font

사용자의 컴퓨터에 설치되었거나 서버에 설치된 폰트이다.
개발자가 폰트를 웹 서버에 업로드하고 CSS로 적용하여 사용할 수 있고 웹 폰트보다 로딩 속도가 빠르다.

자체 폴더에 폰트 파일을 업로드 하는 것도 웹 폰트로 알고 있었는데, 해당 폰트는 사실 로컬 폰트에 해당한다. 웹 개발에서의 로컬 폰트는 웹 페이지에 포함되어 있어서 웹 폰트보다 상대적으로 로딩 속도가 빠르다.

또한 온라인 웹 폰트 서비스에서 제공하지 않는 폰트도 자유롭게 선택할 수 있다.

빠른 초기 로딩 속도 서버에서 직접 불러와서 초기 로딩 속도가 빠름
네트워크 부하 감소 외부 서버에서 폰트를 다운로드하는 네트워크 부하 감소 가능
특정 글꼴만 포함 가능 필요한 폰트만 포함시켜 사용하면 효율적인 리소스 관리 가능

web font

온라인의 특정 서버(ex 구글)에 위치한 폰트 파일을 다운로드하여 화면에 표시하는 방법이다. 웹 서버와 사용자 간 네트워크 대역폭을 사용하여 폰트 파일을 다운로드 받기 때문에 폰트 파일의 크기가 클수록 로딩 시간이 느려진다.

캐싱과 브라우저 최적화 : 적절히 캐싱, 브라우저 최적화로 더 효율적인 관리 가능
네트워크 부하 감소 : 폰트가 필요한 웹사이트에서 일괄적으로 로드되므로, 여러 페이지에 걸쳐 중복 다운로드를 방지하여 네트워크 대역폭을 효율적으로 사용
모바일 최적화 : 모바일 환경에서도 최적화되어 더 빠르게 로드 가능

2. 성능최적화를 위한 선택

로컬 폰트와 웹 폰트는 각 장단점을 가지고 있다.
프로젝트의 목표, 로딩 시간의 중요성, 네트워크 환경 등을 고려하여 어떤 폰트를 사용할지 선택하는 것이 중요하다.

초기 속도가 중요하다면 로컬 폰트, 인터넷 속도가 빠른 환경이라면 웹 폰트가 적절하다.
초기 로딩 최적화를 위해 중요한 텍스트는 로컬 폰트로, 나머지는 웹 폰트로 사용하는 방법도 있다.

🚨 font 적용

1. 로컬 폰트 적용

폰트 파일 다운로드
일반적으로 /font 폴더 내 폰트 파일을 추가한다.
확장자 내용은 아래에서 더 자세하게 기술할 예정이다.

CSS @font-face 규칙 작성 및 적용
업로드가 완료되면 CSS에 @font-face 규칙을 작성한다.

@font-face {
  font-family: "Noto Sans KR";
  src: url("/font/NotoSansKR-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
}

2. 웹 폰트 적용

웹폰트 서비스 선택
포스팅 시점 기준, 아래의 웹 폰트 서비스 중에서 원하는 서비스를 선택할 수 있다.
현 포스팅에선 구글 폰트를 기준으로 적용 방법을 기술하겠다.

무료 웹폰트 서비스 : Google Fonts, Adobe Fonts(Typekit) 등
유료 웹폰트 서비스 : Monotype, FontShop 등

제공하는 코드 추가
아래 순서에 따라 코드를 추가한다. 이때 웹폰트를 불러오는 두가지의 방식이 어떻게 다른지는 아래 내용에서 살펴보자.

구글 폰트 웹 사이트 접속 후 폰트를 검색
희망하는 폰트 굵기를 장바구니에 추가
link 또는 @import 방식을 선택하여 코드를 복사 (웹폰트 최적화 기술 참고)

🚨 font 확장자

로컬 폰트를 다운받아 사용한다면, 확장자를 유의해야한다.
IE11 지원을 고려한다면 WOFF를 사용하는 것이 좋고,
IE11을 배제해도 된다면 WOFF를 30~50% 압축한 WOFF2를 사용하는 것이 좋다.
caniuse, 23.12.15 기준

폰트 파일을 적용할 때 위와 같은 이유로 WOFF2를 우선 작성한다.
이렇게 작성하면 WOFF2가 적용되는 브라우저에선 WOFF2를, 지원을 하지 않는 브라우저에선 WOFF가 다운로드 된다.

@font-face {
  font-family: 'notoSans';
  src: url(/fonts/notoSans.woff2) format("woff2"), 
       url(/fonts/notoSans.woff) format("woff"),
}

TTF (TrueType Font)

Windows, Mac OS, Linux 등 대부분의 운영 체제에서 지원
고해상도 디스플레이에서 자연스럽게 보이도록 설계된 벡터 글꼴 포맷

OTF (OpenType Font)

TTF의 기능 확장 버전, Windows, Mac OS, Linux 등 대부분의 운영 체제에서 지원
TTF 보다 파일 크기가 크기 때문에 로딩 속도가 상대적으로 느릴 수 있음

WOFF (Web Open Font Format)

웹에서 폰트를 사용하기 위해 개발된 형식. 압축률이 높아 로딩 속도가 빠름
웹에서 널리 사용됨

WOFF2 (Web Open Font Format 2)

WOFF의 최신 버전. 압축률이 WOFF보다 더 높아 로딩 속도가 더 빠름
IE 11 이하 버전에서 지원하지 않으며, 일부 브라우저에서 사용시 폰트가 제대로 표시되지 않을 수 있음

🚨 웹폰트 최적화 기술

1. 서브셋(Subsetting)

서브셋 실제 사용되는 글자만 추출하여 파일 크기를 최소화하는 기술

서브셋 기술은 @font-face를 작성할 때 unicode-range 속성을 통해 추가할 수 있다.

하나의 프로젝트에서 디자인을 위해 2개 이상의 폰트가 사용될 때가 많다.
한글용, 영문용 폰트를 각각 사용하는 경우 해당 기술을 통해
파일 크기를 최소화하는 것은 성능 최적화에 큰 도움이 된다.

@font-face {
  font-family: 'Open Sans';
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('/fonts/open-sans-subset.woff2') format('woff2'); /* 서브셋 파일 경로 */
  font-weight: 400;
  font-style: normal;
  unicode-range: U+0000-00FF; /* 사용할 글자 범위 설정 */
}

/*
* 일반적인 특수문자 (Common Symbols) 
  unicode-range: U+0020-002F, U+003A-0040, U+005B-0060, U+007B-007E;
* 모든 기본 다국어 평면 (영어 해당) 
  unicode-range: U+0000-FFFF;
* 한글 범위 설정
  unicode-range: U+AC00-D7AF; 
*/

2. link & @import

웹폰트를 로딩할 때 link 방식과 @import 방식을 선택할 수 있다.
추가하는 폰트의 개수와 프로젝트의 우선 순위를 사용하여 결정할 수 있다.
일반적으로는 성능최적화, 크로스 브라우징 관점에서 link 방식이 권장된다.

link 방식

웹 페이지 최상단에 아래 코드의 형식을 작성한다. 병렬 방식을 사용하여 로딩 속도가 빠르고 모든 브라우저에서 지원된다.

장점 : 병렬 방식으로, 브라우저가 리소스를 처리하기 때문에 로딩 속도 향상,
모든 브라우저에서 지원됨
단점 : 폰트 파일이 여러 개인 경우, CSS에 중복된 코드가 생길 수 있음

  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">

`@import 방식`

CSS 파일 어디나 작성 가능하고 상단에 작성하는 것이 일반적이다. 직렬 방식을 사용하여 로딩 속도가 더딜 수 있고 IE11 이하에선 지원되지 않는다.

장점 : 폰트 파일이 여러 개 있는 경우 CSS 파일의 중복된 코드를 방지
단점 : 직렬 방식으로, 브라우저가 리소스를 순차적으로 처리하기 때문에 로딩 시간이 더 오래 걸릴 수 있음, IE11 이하 버전에서 지원 안됨

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

3. link 'rel'

link의 rel 속성은 문서와의 관계를 정의한다. preload와 prefetch, preconnect를 사용할 수 있다.

성능 최적화를 위해선 preload 또는 preconnect를 사용하는 것이 권장된다.
외부 cdn 링크를 연결한 경우엔 preconnct를, 아닌 경우엔 preload를 사용한다.

<link rel="preconnect" href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap">

rel="preload"

현재 페이지의 로딩 중에 필요한 리소스를 미리 다운로드하여 브라우저 캐시에 저장
필요한 리소스가 실제로 사용되기 전에 이미 로컬에 캐시되어 있어 빠른 로딩이 가능
리소스를 중복 참조하면 중복된 개수만큼 리소스를 가져옴

rel="prefetch"

현재 페이지에서는 사용되지 않지만 다음 페이지에서 사용될 리소스를 미리 다운로드
사용자가 다음 페이지로 이동할 때 해당 리소스가 이미 로컬에 캐시되어 있어 빠른 로딩이 가능
과도한 prefetch는 사용자의 대역폭을 낭비할 수 있으므로 신중한 선택 필요

rel="preconnect"

특정 도메인과의 연결을 사전에 설정하여 해당 도메인과의 네트워크 지연을 최소화
CDN이나 외부 도메인과의 연결에 활용됨
구글 웹폰트 서비스 이용시 자동으로 설정되는 값

4. font-display

웹 서버에서 폰트가 로딩되는 동안, 텍스트가 표시되지 않거나 기본 텍스트로 노출되는 경우가 있다.
FOIT, FOUT 2가지의 속성을 설정할 수 있는 font-display에 대해 알아보자.

FOIT (Flash of Invisible Text)

Chrome, Safari 등의 브라우저 초기값

웹폰트 로딩되는 동안, 텍스트를 표시하지 않는 경우이다.
글자가 숨겨져 있는 것처럼 보이는데, not 과 같은 단어가 미노출 되었을 때 문맥과 전혀 다른 내용을 사용자에게 전달할 가능성이 있어서 권장되지 않는다.

FOUT (Flash of Unstyled Tex)

IE, Edge 브라우저에서 발생

웹폰트 로딩되는 동안, 기본 텍스트를 우선 표시하는 경우이다.
처음 웹페이지 접근 시 기본 텍스트가 노출된다. 웹폰트 로딩이 완료되면, 해당 폰트로 교체된다.
이 과정이 사용자에게 보여지면, 버벅 거리는 것처럼 느껴질 수 있다.

font-display

위에서 언급한 FOIT, FOUT와 관련된 웹폰트의 로딩 동작을 지시할 수 있는 속성이다.
특정 브라우저에서는 지원되지 않는다. 상황에 따라 적합한 값을 사용해야 하나, FOIT가 기본값인 크롬/사파리 브라우저에선 auto가 아닌 값을 사용하는 것이 좋다.

`auto`

기본값, 브라우저가 자동으로 FOIT와 FOUT를 처리함

`swap`

폰트 로딩이 완료될 때까지 기본 폰트로 텍스트를 표시하다가 로딩이 완료되면 웹 폰트로 교체
로딩 중에도 텍스트를 볼 수 있어서 사용자 경험을 개선 할 수 있음
기본 폰트와 로딩된 폰트가 시각적으로 큰 차이가 없는 경우에 적합함
구글 웹폰트 기본 세팅값

`fallback`

FOIT를 피하면서 로딩이 느려져도, 대체 폰트로 텍스트를 볼 수 있음
로딩이 완료되면 웹폰트로 교체됨
빠른 초기 렌더링이 중요한 경우에 적합함

`optional`

FOIT를 피하고 로딩에 실패해도 무시하고 계속 진행
폰트가 없는 경우에 대비한 대체 폰트를 사용 가능
웹 폰트가 중요하지 않은 경우에 적합함

🚨 참고 자료 및 링크

소정

" 퍼블리셔에서 프론트엔드로 Level up 중 ... 💨 "

이전 포스트

[성능최적화] 웹폰트 최적화 가이드