웹 페이지 로딩 속도를 개선하기 위해 폰트를 미리 로드(preload)하는 방법을 사용할 수 있다.
미리 로드하는 것은 필요한 리소스를 브라우저에게 미리 알려주어, 페이지 로딩 도중 리소스 다운로드 시간을 절약할 수 있다.
HTML 문서의 <head> 영역에 <link> 태그를 사용하여 폰트 파일을 미리 로드하도록 설정한다.
이때 rel 속성에 "preload" 값을 설정하고, href 속성에 폰트 파일의 경로를 지정한다.
또한 as 속성에 "font" 값을 설정하여 브라우저에게 해당 리소스가 폰트임을 알려준다.
type 속성을 사용하여 폰트 파일의 MIME 타입을 지정할 수 있다.
crossorigin 속성은 폰트 파일이 다른 도메인에서 로드되는 경우에 필요하다.
이 속성이 설정되어 있지 않으면 CORS(Cross-Origin Resource Sharing) 정책에 따라 브라우저에서 보안의 이유로 폰트를 블록할 수 있다.
<head>
<meta charset="UTF-8">
<title>Font Preload Example</title>
<link rel="preload" href="/fonts/my-font.woff2" as="font" type="font/woff2" crossorigin>
</head>폰트를 미리 로드한 후, 웹 페이지에서 해당 폰트를 사용하려면 CSS에서 @font-face 규칙을 사용하여 폰트를 정의하고 사용한다.
@font-face {
font-family: "My Font";
src: url("/fonts/my-font.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
body {
font-family: "My Font", sans-serif;
}
로컬 폰트 사용 시 최적화 기법
로컬 폰트가 사용 가능한 경우 먼저 로드하는 방법을 사용하려면 CSS에서 @font-face 규칙과 함께 local() 함수를 사용하여 폰트를 정의한다. 이렇게 하면 웹 페이지가 로딩될 때 먼저 로컬 폰트를 찾고, 없으면 웹 폰트를 다운로드한다.
예를 들어, 로컬 폰트 "My Font"가 사용 가능한 경우 먼저 사용하고, 없으면 웹 폰트를 로드하려면 다음과 같이 설정할 수 있다.
@font-face {
font-family: "My Font";
src: local("My Font"),
url("/fonts/my-font.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
body {
font-family: "My Font", sans-serif;
}
웹 폰트만 로딩해야 하는 상황에서 최적화 기법
웹 폰트만 로딩해야 하는 상황에서는 웹 폰트의 로딩 속도와 성능을 최적화하는 것이 중요하다.
1. 폰트 서브셋(subset) 사용: 웹 페이지에서 실제로 사용되는 글자들만 포함하는 폰트 파일을 만들어 로딩 시간을 줄일 수 있다.
2. 폰트 포맷 선택: 최신 브라우저에서 지원하는 WOFF2 포맷을 사용하면 압축률이 높아져 다운로드 시간이 단축된다.
3. 폰트 미리 로드(preload): 위에서 설명한 폰트 미리 로드 기법을 사용하여 페이지 로딩 시 폰트 다운로드 시간을 절약할 수 있다.
4. 폰트 로딩 전략: 웹 폰트 로딩 전략을 선택하여 사용자 경험을 최적화할 수 있습니다. 예를 들어, font-display 속성을 사용하여 폰트 로딩 동작을 설정할 수 있다.
@font-face {
font-family: "My Font";
src: url("/fonts/my-font.woff2") format("woff2");
font-weight: normal;