더 나은 사용자 경험을 위한 Web Font 로딩 최적화

소개
웹사이트에서 사용자 정의 웹 글꼴을 사용할 때 글꼴 로드 중에 깜박이거나 스타일이 지정되지 않은 텍스트가 깜박이는(FOUT) 등의 문제가 발생할 수 있습니다. 이러한 문제는 사용자 경험에 부정적인 영향을 미쳐 불만을 초래하고 외관이 세련되지 않게 보일 수 있습니다. 다행히도 웹 글꼴 로딩을 최적화하고 웹사이트 방문자에게 보다 원활한 경험을 제공하는 효과적인 방법이 있습니다.

방법 1: <link> 태그를 사용하여 글꼴 미리 로드하기
웹 글꼴 로딩을 최적화하는 깔끔하고 간단한 방법 중 하나는 <link> 태그에 미리 로드 속성을 사용하는 것입니다. 이 기술을 사용하면 페이지 로딩 프로세스 초기에 글꼴 파일을 가져와 캐시하여 글꼴 로딩 지연을 줄일 수 있습니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Your Page Title</title>
  <link rel="preload" href="../fonts/NotoSansKR-Bold.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="../fonts/NotoSansKR-Bold.woff" as="font" type="font/woff" crossorigin>
  <!-- Your other meta tags, CSS, and scripts go here -->
</head>
<body>
  <!-- Your page content goes here -->
</body>
</html>

방법 2: font-display(글꼴 표시 속성) 사용자 지정하기
@font-face 규칙 내의 font-display(글꼴 표시 속성)을 사용하여 글꼴 로딩 동작을 제어할 수 있습니다.

auto, fallback, optional, swap과 같은 다양한 값을 사용하여 성능과 시각적 모양 간에 다양한 절충점을 찾을 수 있습니다.

@font-face {
  font-family: 'Noto Sans KR';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/NotoSansKR-Bold.woff2') format('woff2'),
       url('../fonts/NotoSansKR-Bold.woff') format('woff');
  font-display: auto;
  /* OR */
  font-display: fallback;
  /* OR */
  font-display: optional;
  /* OR */
  font-display: swap;
}

방법 3: 글꼴 로딩 전략 결합
여러 가지 방법을 조합하여 웹사이트에 가장 적합한 접근 방식을 찾아보세요.

글꼴 하위 집합, 글꼴 형식 최적화, 자바스크립트 기반 글꼴 로더를 사용하여 더 많은 제어를 고려하세요.

결론
웹 글꼴 로딩을 최적화하면 웹사이트의 사용자 경험을 개선하고 콘텐츠가 원활하게 표시되도록 할 수 있습니다.

preload 와 함께 <link> 태그를 사용하고 font-display(글꼴 표시 속성)을 사용자 정의하는 것은 글꼴 로딩 성능을 개선하는 깔끔하고 효과적인 방법입니다.

선택한 글꼴 로딩 방식이 효과적으로 작동하고 탁월한 사용자 경험을 제공할 수 있도록 다양한 기기와 브라우저에서 웹사이트를 철저히 테스트하는 것을 잊지 마세요.

'Programming > HTML5_CSS3' 카테고리의 다른 글

[CSS] Tailwind CSS 장단점과 사용법 (0)	2023.04.07
[CSS] 가상 선택자 정리 및 비교 nth-child, nth-of-type (0)	2023.03.16
[HTML] 웹표준 table 구조 (0)	2023.03.02
[SASS] SASS 컴파일하는 방법 (0)	2023.02.28
[SASS] SASS를 쓰는 이유 (0)	2023.02.23

Ton-Ton