폰트 사용시

정대형·2023년 4월 4일

zero-base

목록 보기

9/10

이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다
Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행한다

<head>
  <link rel="preload" href="/assets/fonts/Gothic.woff2" as="font" type="font/woff2" crossorigin>
</head>

로컬에 설치된 폰트를 사용할 경우, 폰트를 다운로드할 필요 없이 로컬에서 빠르게 로딩할 수 있다. 이를 이용하기 위해 CSS @font-face 를 사용하여 로컬 폰트를 불러올 수 있다.

@font-face {
  font-family: 'Nanum Gothic';
  src: local('Nanum Gothic'), local('NanumGothic'), url('NanumGothic.woff2') format('woff2');
}

열심히하자