로컬 폰트(Local Font)
사용자의 컴퓨터나 디바이스에 미리 설치된 폰트를 의미한다.
사용자는 로컬 폰트를 이용하여 웹 페이지에서 텍스트를 보거나 인쇄물을 제작할 수 있다. 예를 들어, "Arial"이나 "Times New Roman"과 같은 폰트들은 대부분의 컴퓨터나 디바이스에서 기본적으로 제공되는 로컬 폰트이다.
웹 폰트(Web Font)
인터넷을 통해 다운로드하여 사용하는 폰트이다. 웹 페이지에서 사용하는 특정 폰트가 로컬 폰트에 없을 경우 이를 대신하여 사용할 수 있다. 웹 폰트를 사용하면 디자인적 자유도가 높아진다. 또한 웹 폰트를 사용하면 폰트의 일관성을 유지할 수 있다. 대표적으로 Google Fonts, Adobe Fonts, Font Squirrel 등이 있다.
웹 페이지에서 폰트를 로딩하는 방법
로컬 폰트 사용 시 preload 속성 이용
로컬 폰트를 사용하는 경우, preload 속성을 사용하여 브라우저에 폰트를 로드하도록 지시할 수 있다. 이렇게 하면 웹 페이지가 로드될 때 폰트가 빠르게 표시될 수 있다. preload 속성은 link 태그의 rel 속성과 함께 사용된다.
<link rel="preload" href="myfont.woff2" as="font" type="font/woff2" crossorigin>
웹 폰트 사용 시 @font-face 규칙 이용
웹 폰트를 사용하는 경우, @font-face 규칙을 사용하여 폰트를 로드할 수 있다. 이 규칙을 사용하면 웹 페이지에서 폰트를 사용하는 요소가 로드될 때 폰트가 자동으로 로드된다.
@font-face {
font-family: "MyWebFont";
src: url("myfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
}
웹 폰트 사용 시 font-display 속성 이용
웹 폰트를 사용하는 경우, font-display 속성을 사용하여 웹 페이지의 렌더링 속도를 최적화할 수 있다. 이 속성을 사용하면 웹 페이지가 로드될 때 폰트가 로드되기 전에 일시적으로 폰트가 없는 상태에서 텍스트가 표시되는 문제를 방지할 수 있다. font-display 속성은 @font-face 규칙 안에서 지정한다.
@font-face {
font-family: "MyWebFont";
src: url("myfont.woff2") format("woff2");
font-weight: 400;
font-style: normal;
font-display: swap;
}
📍 preload와 font-display 속성을 적절히 사용하면 웹 페이지의 렌더링 성능을 향상시키는 데 가장 효과적이다.
웹 폰트만 로딩해야하는 상황에서 최적화 기법
필요한 폰트만 로딩
웹 페이지에서 사용하는 모든 폰트를 로딩하는 것은 불필요한 대역폭과 로딩 시간을 발생시키므로 최소한의 필요한 폰트만 로딩해야 한다. 이를 위해 폰트 파일의 크기를 최적화하고, 폰트를 사용하는 요소에만 로드하도록 지정하는 것이 좋다.
서브셋 폰트 사용
서브셋 폰트는 전체 폰트 중에서 사용하는 글자만 추려내어 만든 폰트로, 필요한 글자만 로딩하여 대역폭과 로딩 시간을 절약할 수 있다. 이를 위해서는 서브셋 폰트 생성 도구를 사용하거나, Google Fonts와 같은 서비스를 이용하여 서브셋 폰트를 다운로드할 수 있다.
폰트 압축 사용
웹 폰트 파일은 크기가 크기 때문에 다운로드 시간이 오래 걸릴 수 있다. 이를 해결하기 위해 폰트 파일을 Gzip, Brotli와 같은 압축 알고리즘을 사용하여 압축할 수 있다. 이렇게 하면 폰트 파일의 크기가 줄어들어 다운로드 시간이 단축된다.
캐싱 활용
폰트 파일은 자주 사용되기 때문에, 캐싱을 활용하여 다운로드 시간을 줄일 수 있다. 이를 위해 폰트 파일에 적절한 캐싱 헤더를 설정하여 브라우저가 캐시를 활용하도록 할 수 있다. 예를 들어, 캐싱 기간을 길게 설정하거나 ETag를 사용하여 캐싱 제어를 할 수 있다.
📍 최적화 기법들을 적절하게 활용하면 웹 페이지의 폰트 로딩 성능을 향상시킬 수 있다.
