CSS, 웹 폰트 로딩 속도 개선하기

0verfl0w767·2024년 12월 8일

CSS font link

웹 폰트 로딩 속도 개선하기

웹 폰트를 사용할 때 페이지 로딩 시 폰트가 느리게 로드되는 문제를 겪을 수 있다.

그럴때, link rel="preload" 를 사용해서 개선해보자.

먼저 적용 전, 후 영상이 아래에 있으니 참고하길 바란다.

link rel="preload" 적용 전

모달 창이 나타날 때 웹 폰트가 늦게 로딩되어 글자가 제대로 표시되기까지 시간이 걸리는 현상이 있다.

link rel="preload" 적용 후

같은 모달 창에서 폰트 로딩 지연 문제가 사라져 글자가 즉시 렌더링되는 것을 확인할 수 있다.

link rel="preload" 로 폰트 로딩 속도 개선

preload를 사용했을 때 속도가 개선되는 이유는 리소스를 미리 로드해서 필요한 시점에 바로 사용할 수 있게 만들기 때문이다.
이미지가 로드될 때, 다양한 리소스들 이미지, 폰트, 스타일시트를 로드하는데, 이때 여러 리소스들이 병렬로 로드되면 속도가 느려질 수 있다.
하지만 preload를 사용하면, 특정 리소스를 페이지 로딩의 초기 단계에서 미리 다운로드한다.
이 방식은 브라우저의 리소스 로딩 순서를 최적화하고, 폰트나 중요한 리소스가 페이지 렌더링 전에 이미 준비되게 만들어서 화면이 빠르게 렌더링될 수 있도록 도와준다.

예시 1

일반적인 사용

일반적으로 웹 폰트를 사용하기 위해서는 @font-face를 사용하여 폰트를 정의한다.

<head>
  ...
  <style>
    @font-face {
      font-family: 'ExampleFont';
      font-weight: 500;
      src: url(https://exampl.com/font/Example.woff2) format('woff2');
    }
  </style>
  ...
</head>

이 방식으로 한다면, 위와 같이 폰트 파일이 페이지가 로드될 때까지 기다려야 하므로 폰트 로딩 속도에 영향을 미칠 수 있다.

link rel="preload" 사용

예를 들어, ExampleFont라는 폰트를 사용한다고 할 때, 다음과 같은 방식으로 사용할 수 있다.

<link rel="preload" href="https://example.com/font/Example.woff2" as="font" type="font/woff2" crossorigin="anonymous">

영상과 같은 문제를 방지하기 위해, rel="preload"를 사용하여 폰트를 미리 로드할 수 있다.

<head>
  <link rel="preload" href="https://example.com/font/Example.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <style>
    @font-face {
      font-family: 'ExampleFont';
      font-weight: 500;
      src: url(https://exampl.com/font/Example.woff2) format('woff2');
    }
  </style>
  ...
</head>

rel="preload"와 @font-face를 결합하여 코드를 결합하여 위와 같이 사용할 수 있다.

예시 2

여러가지 폰트 사용시

<head>
  <link rel="preload" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareEB.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareB.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" href="https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareR.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <style>
    @font-face {
      font-family: 'NanumSquare';
      font-weight: 800;
      src: url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareEB.woff2) format('woff2');
    }
    @font-face {
      font-family: 'NanumSquare';
      font-weight: 700;
      src: url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareB.woff2) format('woff2');
    }
    @font-face {
      font-family: 'NanumSquare';
      font-weight: 400;
      src: url(https://cdn.jsdelivr.net/gh/moonspam/NanumSquare@2.0/NanumSquareR.woff2) format('woff2');
    }
  </style>
</head>

번외로, 웹 폰트 확장자 종류

웹 폰트를 사용할 때 다양한 확장자들이 있으며, 각기 다른 브라우저 호환성이나 파일 크기, 성능에 따라 선택할 수 있다. 아래 표는 주요 웹 폰트 확장자들을 정리한 것이다.

확장자	설명	지원 브라우저	특징
`.woff`	Web Open Font Format (1)	대부분의 최신 브라우저 (Chrome, Firefox, Safari, Edge 등)	압축된 폰트 포맷으로, 거의 모든 브라우저에서 지원.
`.woff2`	Web Open Font Format 2 (더 높은 압축률)	Chrome, Firefox, Edge, Opera 등 대부분의 최신 브라우저	`.woff`보다 더 작은 파일 크기, 높은 압축률로 성능 향상.
`.ttf`	TrueType Font	모든 주요 브라우저에서 지원	폰트 파일 크기가 커서 성능에 영향을 미칠 수 있음.
`.otf`	OpenType Font	대부분의 브라우저에서 지원	고급 문자 기능(예: 리게처, 문자 대체 등)을 지원하는 폰트.
`.eot`	Embedded OpenType	Internet Explorer (IE)에서만 지원	IE에서만 사용되며, 다른 브라우저에서는 거의 사용되지 않음.
`.svg`	Scalable Vector Graphics	구형 브라우저에서 지원	주로 아이폰, 아이패드에서 폰트를 사용해야 할 때 사용됨.

참고

.woff2는 .woff보다 파일 크기가 작고 성능이 향상되어 최근에는 많이 사용된다.
.eot는 구형 Internet Explorer에서만 필요하며, 다른 브라우저에서는 거의 사용되지 않는다.
.ttf와 .otf는 일반적으로 데스크탑 환경에서 사용되지만 웹에서도 사용할 수 있다. 다만, 웹에서 사용하는 폰트는 압축된 형태인 .woff나 .woff2가 더 효율적이다.