Font를 Preload하는 방법

오늘은 제목 그대로 어떤 방식으로 하는지 적어볼게요

우선 Preload가 뭔지부터 시작합니당

 

Preload

웹 페이지에서 리소스(폰트, 이미지, 스크립트 등)를 미리 로드하여 로딩 시간을 최적화하는 방법

이렇게 웹 페이지를 로드할 때 필요한 리소스를 미리 가져와 사용자 경험을 향상시킬 수 있음.

 

따라서,

폰트 preload의 경우, 폰트 파일을 미리 가져와 브라우저에 캐싱하여 로딩 시간을 단축시키는 거예요

이러면 렌더링 될 때 딜레이 없이 폰트가 즉시 사용될 수 있는 거죠

 

preload를 사용하기 위한 단계

1. HTML의 head 태그 내에 preload 태그를 추가

<link rel="preload" href="폰트파일경로" as="font" type="폰트유형" crossorigin>

- href : 폰트 파일의 경로를 지정

- as : 리소스의 종류를 지정. ex) 폰트의 경우 "font"로 지정

- type : 폰트의 유형 지정. ex) TrueType 폰트의 경우 "font/ttf"로 지정

- crossorigin : 다른 도메인에서 폰트를 가져올 때 교차 출처 리소스 공유(CORS) 설정

 

2. 폰트를 사용할 CSS 파일 또는 스타일 태그에 @font-face를 이용하여 폰트를 정의

3. 폰트를 사용할 요소에 font-family 속성을 설정

@font-face {
  font-family: '폰트명';
  src: url('폰트파일경로');
}

.폰트를사용할요소 {
  font-family: '폰트명', sans-serif;
}

CSS는 이런 방식으로 설정해요

 

그럼 이제 font를 preload 하는 방법을 알아보러 가시죠

font를 로딩하는 방법에는 로컬 폰트를 사용하는 경우 / 웹 폰트를 사용하는 경우로 나눠요

 

각 상황에 맞는 방법으로 오겠슴다

 

1. 로컬 폰트를 사용하는 경우

 

- @font-face를 사용하여 CSS에 로컬 폰트를 정의

@font-face {
  font-family: '로컬폰트명';
  src: url('로컬폰트파일경로');
}

- 이후 폰트를 사용할 요소에 font-family 속성을 설정

.폰트를사용할요소 {
  font-family: '로컬폰트명', sans-serif;
}

이렇게 설정을 하면 웹 페이지 로드될 때 로컬 폰트가 먼저 로딩되어 사용되는 거예요

 

2. 웹 폰트를 사용하는 경우

 

- Google Fonts, Adobe Fonts 등의 웹 폰트 서비스를 이용해요. 이걸로 웹 페이지에 적용하는 거죠

- 웹 폰트 서비스에서 제공하는 embed 코드를 웹 페이지의 head 태그 내에 추가하는 거예요

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=폰트명&display=swap">

이렇게요

- 폰트를 사용할 요소에 font-family 속성을 설정

.폰트를사용할요소 {
  font-family: '폰트명', sans-serif;
}

이렇게 CSS까지 설정하면 웹 페이지가 로드될 때 웹 폰트가 필요한 경우에만 로딩되어 사용되는 겁니다.

 

오늘은 이렇게 Font를 Preload 하는 경우와 방법을 말해봤는데여

부족한 부분이나 잘못된 부분이 있다면 댓글로 많은 피드백 부탁드립니다 :)