폰트를 preload하는 방법은 웹 페이지의 성능을 향상시키는 데 도움이 된다.
로컬 폰트와 웹 폰트를 적절히 처리하여 아래와 같이 최적화할 수 있다.
1. 로컬 폰트 사용 및 Preload:
로컬에 폰트 파일이 있을 때, 먼저 로컬 폰트를 사용하고 필요할 때만 웹 폰트를 로딩하는 방법이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Font Preload 예제</title>
<!-- 로컬 폰트 CSS -->
<style>
@font-face {
font-family: 'LocalFont';
src: local('LocalFont'), url('local-font.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
body {
font-family: 'LocalFont', sans-serif;
}
</style>
<!-- 웹 폰트 Preload -->
<link rel="preload" as="font" href="web-font.woff2" type="font/woff2" crossorigin="anonymous">
</head>
<body>
<!-- 웹 폰트를 사용하는 콘텐츠 -->
<h1>This is a heading using Web Font</h1>
</body>
</html>
2. Web Font 최적화 기법:
웹 폰트를 최적화하기 위해, 필요한 글꼴 굵기와 스타일만 로드하도록 할 수 있다. 이를 위해 font-display 속성을 사용한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Font 최적화 예제</title>
<!-- 웹 폰트 CSS -->
<style>
@font-face {
font-family: 'OptimizedFont';
src: url('web-font.woff2') format('woff2');
font-weight: 300;
font-style: normal;
font-display: swap; /* 최적화: 빠르게 텍스트를 표시 후 폰트 로딩 */
}
body {
font-family: 'OptimizedFont', sans-serif;
}
</style>
</head>
<body>
<!-- 웹 폰트를 사용하는 콘텐츠 -->
<h1>This is a heading using Optimized Web Font</h1>
</body>
</html>
이러한 방법들을 통해 로컬 폰트와 웹 폰트를 효과적으로 조합하고, 필요한 폰트 리소스를 사전에 로드하여 웹 페이지의 성능을 최적화할 수 있다.
'HTML CSS' 카테고리의 다른 글
| 반응형 디자인에서 미디어쿼리 최소화 및 Rem 단위 활용 방법 (34) | 2023.11.22 |
|---|---|
| Animation 최적화 기법: Transform 및 CSS 활용의 핵심 (26) | 2023.11.22 |
| Safari 브라우저에서 크로스브라우징 하기 (18) | 2023.11.12 |
| HTML5 시멘틱 태그와 웹 표준을 지키는 이유 (19) | 2023.11.12 |
| WAI-ARIA란? (18) | 2023.11.11 |