👏🏻 들어가기 전에
𝗤. 왜 폰트를 Preload(미리 설치) 해야 할까?
𝐀. 폰트를 사용자의 컴퓨터에 미리 다운로드하여 로딩하는 시간을 줄이고 성능을 개선하기 위해서입니다.
일반적으로 웹 페이지에서 폰트를 로딩할 때, 사용자의 컴퓨터에 해당 폰트가 없는 경우 해당 웹 폰트를 다운로드하여 로딩해야 합니다.
그러나 폰트를 사전에 설치하면, 폰트 설정에 소요되는 시간이 줄어들어 사용자에게 더 빠르게 웹 페이지를 제공할 수 있습니다.
✦ 폰트를 미리 설치하면 얻는 것들
1. 초기 로딩 시간 단축
사용자가 웹 페이지를 방문할 때, 폰트 파일을 사전에 로딩하면 폰트 파일이 필요한 시점에 이미 로드되어 있어, 이를 통해 사용자에게 더 빠르게 웹 페이지를 보여줄 수 있습니다.
🤔 폰트 파일이나 스타일 문서나 로딩 속도는 비슷하지 않을까?
👊🏻 아니다. 폰트 파일은 일반적으로 다른 리소스보다 크기가 크다. 잘못하면 웹 페이지의 표시가 지연되는 현상을 목격할 수 있다.
2. 글꼴 깨짐의 최소화
폰트를 미리 로딩해 놓으면, 웹 폰트가 로딩되기 전까지 미리 로드된 로컬 폰트를 사용할 수 있으므로 글꼴이 깨지는 현상을 보다 완화할 수 있습니다.
🩶 로컬 폰트가 있을 때, 폰트 로딩하기
웹 페이지에서 폰트를 로딩할 때, 사용자의 컴퓨터에 이미 설치된 로컬 폰트를 활용하여 로딩 속도를 향상시킬 수 있습니다.
① CSS의 @font-face 사용하기
@font-face {
font-family: '로컬폰트명';
src: url('로컬폰트파일경로');
}
>
body {
font-family: '로컬폰트명', sans-serif;
}< 로컬 폰트 사용 과정 >
- 로컬 폰트를 로딩하기 위해서는 해당 폰트 파일을 웹 서버에 업로드 합니다.
- CSS에서 @font-face를 사용하여 폰트를 선언합니다. (이때, 폰트 파일의 경로를 올바르게 지정해야 합니다.)
- 요소에 폰트를 적용하면, 사용자의 컴퓨터에 설치된 폰트를 참조하여 로딩하게 됩니다.
이처럼 @font-face를 통해 웹 페이지에서 사용할 폰트를 지정하면, 사용자의 컴퓨터에 설치된 폰트를 참조하여 로딩됩니다.
② font-display 속성으로 우선순위 조정하기
@font-face {
font-family: '웹폰트명';
src: url('웹폰트파일경로');
font-display: swap;
}
>
body {
font-family: '웹폰트명', sans-serif;
}font-display 속성은 웹 폰트와 로컬 폰트의 로딩 우선순위를 조정할 수 있으며, FOIT와 FOUT를 방지하기 위해 사용합니다.
| 값 | 설명 | 에러 현상 방지 |
|---|---|---|
auto | 브라우저의 기본 동작을 따릅니다. | . |
block | 폰트 파일이 로드될 때까지 기다린 후, 로드되면 텍스트가 보입니다. | FOIT 방지 |
swap | 웹 폰트가 로딩되기 전까지 로컬 폰트를 사용합니다. | FOIT, FOUT 방지 |
fallback | 폰트 파일이 로드되기 전까지 기본 시스템 폰트로 텍스트가 표시되며, 폰트 파일이 로드되면 웹 폰트로 교체됩니다. | FOIT, FOUT 방지 |
FOIT와FOUT란?
➡️ "폰트의 로딩 과정에서의 에러 현상"
FOIT (Flash of Invisible Text)
웹 페이지가 로드될 때, 폰트 파일이 로딩(다운로드)되기 전까지 텍스트가 보이지 않는 현상을 의미합니다.FOUT (Flash of Unstyled Text)
FOUT는 폰트가 로딩되기 전에 기본 시스템 폰트로 잠시 텍스트가 표시된 다음, 웹 폰트로 교체되는 현상을 의미합니다.
텍스트의 스타일이 변경되는 것처럼 보입니다.
🩶 웹 폰트만 로딩해야 하는 상황에서의 최적화 기법
(1)
Font Subset를 생성하여 필요한 글리프(문자 혹은 기호)만 로딩하거나,
(2)Font Preloading을 통해 폰트 파일을 사전에 로딩하여 로딩 시간을 단축시킬 수 있습니다.
① Subset 폰트 사용하기
@font-face {
font-family: '웹폰트명';
src: url('subset폰트파일경로');
}
body {
font-family: '웹폰트명', sans-serif;
}Font Subset에는 필요한 글리프만 포함되어 있기 때문에, 폰트 파일의 크기가 줄어들어 로딩 속도를 개선할 수 있습니다.
② Font Preloading 사용하기
<link rel="preload" href="웹폰트파일경로" as="font" type="font/woff2" crossorigin>HTML에서 <link> 태그를 통해 로딩 시간을 단축시킬 수 있습니다.
< Preload를 사용하는 과정 >
rel="preload"
- 브라우저에게 해당 리소스를 미리 가져와 캐시하도록 지시합니다.
as속성을 사용하여, 브라우저가 해당 리소스를 어떻게 처리해야 하는지 알려줍니다.
이때 리소스의 우선순위를 설정하였기 때문에, 해당 파일을 다른 리소스보다 더 높은 우선순위로 처리하게 됩니다as="font로 폰트 파일을 로드할 것임을 지정합니다.type="font/woff2로 폰트 파일의 형식을 웹 폰트에 맞게 지정해줍니다.crossorigin속성을 사용하여Cross-Origin 요청(다른 도메인에서 리소스를 요청)을 허용합니다.
