웹 페이지의 성능을 향상하기 위한 방법 중 하나로, 폰트를 선택적으로 미리 불러옴으로써 다운로드 시간을 단축한다.
로컬 폰트 로딩
로컬에 폰트 파일이 이미 있는 경우, CSS를 통해 폰트 파일을 불러온다.
@font-face {
font-family: 'MyLocalFont'; /* 원하는 폰트 이름 */
src: url('path/roboto.woff2') format('woff2'), /* 웹킷 브라우저를 위한 포맷 */
url('path.roboto.woff') format('woff'); /* 대부분의 브라우저를 위한 포맷 */
font-weight: normal;
font-style: normal;
}
body {
font-family: 'MyLocalFont', sans-serif; /* 로컬 폰트를 기본 폰트로 설정 */
}
웹 폰트 로딩
웹 폰트 서비스 (예: Google Fonts, Adobe Fonts 등)를 사용하여 웹 폰트를 불러온다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap">
/*display=swap : 웹 페이지의 텍스트 내용이 렌더링되는 동안 사용자에게 기본 폰트로 적용되게 하는 기능*/3. HTML 문서의 head 태그 내 preload 링크를 사용
웹 페이지의 성능을 최적화하기 위해 폰트를 미리 불러온다.
<link> 태그의 rel="preload" 속성을 사용한다.
<head>
<link rel="preload" href="/roboto.woff2" as="font" type="font/woff2">
<!-- preload 함으로써 FOUT(Flash of Unstyled Text)현상을 방지한다. -->
</head>
브라우저는 폰트 스타일 시트를 먼저 로드하고, 페이지가 렌더링될 때 해당 폰트 스타일이 적용된다.
*FOUT(Flash of Unstyled Text) : 폰트가 로딩되기 전 텍스트 내용이 보여지는 현상.
'개념 정리' 카테고리의 다른 글
| 반응형 작업과 mediaquery 최소화 (0) | 2024.01.21 |
|---|---|
| CSS 애니메이션 최적화 (0) | 2024.01.21 |
| CSS 3D 활용 (0) | 2024.01.21 |
| 자바스크립트의 배열 (0) | 2024.01.08 |
| 시멘틱 태그와 웹 표준 (0) | 2023.12.26 |