웹 페이지에서 글꼴을 사용할 때 글꼴 파일 로딩 방법과 최적화 기법을 사용하여 로딩 속도를 향상시키자.
1. 로컬 글꼴 사용
로컬에 설치된 글꼴을 사용하는 경우 다운로드하지 않고도 로컬에서 빠르게 로드할 수 있습니다.
이것을 사용하기 위해 CSS @글꼴-얼굴 를 사용하여 로컬 글꼴을 로드할 수 있습니다.
로컬 글꼴이 있는 CSS 코드의 예
@font-face {
font-family: 'Nanum Gothic';
src: local('Nanum Gothic'), local('NanumGothic'), url('NanumGothic.woff2') format('woff2');
font-weight: 400;
font-style: normal;
}위의 코드에서 local() 함수는 로컬 글꼴을 참조하고 url() 함수는 웹폰트 파일 경로를 반환합니다.
이와 같이 로컬 글꼴을 사용하면 웹 글꼴을 다운로드하지 않고도 더 빠르게 로드할 수 있습니다.
2. 웹폰트 프리로딩
웹폰트 파일이 크고 로딩시간이 길다면, 소환장를 사용하여 로딩 시간을 줄일 수 있습니다.
소환장은 브라우저는 백그라운드에서 글꼴 파일을 다운로드합니다.
전에 다운로드그래서 필요할 때 폰트를 빠르게 불러오는 방법입니다.
웹 글꼴 미리 로드를 사용하는 HTML 코드의 예
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" as="style" onload="this.onload=null;this.rel="stylesheet"">
<noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"></noscript>위의 코드에서 웹폰트 파일은 rel=”preload” 속성으로 미리 다운로드 받고 as=”style” 속성으로 스타일 시트로 다운로드하도록 설정되어 있습니다.
onload 이벤트 핸들러로 사전 로드가 완료되면 스타일시트가 로드됩니다.
3. 글꼴 하위 집합 사용
서브세트 글꼴은 전체 글꼴 파일이 아니며, 필수 문자만 포함된 파일로 웹페이지에서 필수 문자만 다운로드이것은 로딩 속도를 향상시킬 수 있습니다.
이를 사용하기 위해서는 구글폰트에서 제공하는 부분집합체 기능이나 타사의 부분집합체 생성툴을 이용하여 부분집합체를 생성할 수 있다.
4. 폰트 파일 최적화
웹폰트 파일이 크기 때문에 로드하는 데 시간이 오래 걸릴 수 있습니다.
이 문제를 해결하기 위해 다음과 같은 최적화 기술을 사용할 수 있습니다.
- Gzip 압축: 웹 서버에서 Gzip 압축을 사용하여 웹폰트 파일을 압축하여 파일 크기를 줄일 수 있습니다.
- WOFF2 형식 사용: WOFF2 형식은 웹폰트 파일을 압축하여 더 작은 크기로 저장할 수 있습니다.
따라서 WOFF2 형식을 사용하면 로딩 속도를 높일 수 있습니다. - 하위 글꼴 사용: 하위 글꼴은 필요한 문자만 포함된 파일이며 전체 글꼴 파일보다 작은 크기로 저장할 수 있습니다.
- 캐시 글꼴 파일: 브라우저는 다운로드 후 캐시에 글꼴 파일을 저장합니다.
따라서 폰트 파일 캐시 보존 기간을 설정하면 다음에 같은 폰트를 사용할 때 캐시된 파일을 사용하기 때문에 로딩 속도를 높일 수 있다.
이러한 최적화 기법을 이용하여 폰트 파일을 로딩할 때, Gzip 압축 사용, WOFF2 포맷 사용, 폰트 일부 사용, 폰트 캐시 유지 등을 고려하여 최적화된 폰트 파일을 사용함으로써 로딩 속도를 향상시킬 수 있다.
글꼴 파일.