자체 호스팅 글꼴은 서드 파티 글꼴 제공업체 (예: Google Fonts)가 아닌 자체 서버에서 제공되는 글꼴 파일입니다.
글꼴을 빠르게 제공하는 것은 매우 중요합니다. 글꼴 전달 속도가 빠르면 텍스트가 사용자에게 더 빨리 표시될 뿐만 아니라 글꼴로 인해 레이아웃 변경이 발생하는지 여부에도 큰 영향을 미칩니다. 필요하기 전에 글꼴을 제공할 수 없는 경우 일반적으로 글꼴이 전환될 때 레이아웃이 변경됩니다. 이 레이아웃 변경의 크기는 대체 글꼴이 웹 글꼴과 얼마나 가깝게 일치하는지에 따라 달라질 수 있습니다. 이 현상을 실제로 확인하려면 데모를 보고 고속 연결과 느린 연결에서 발생하는 레이아웃 변경을 비교하세요.
아래 예는 인라인 글꼴 선언 사용과 WOFF2 글꼴 형식 사용이라는 두 가지 성능 기법을 결합하여 자체 호스팅 글꼴을 최대한 빠르게 제공합니다.
인라인 글꼴 선언: 이 정보를 외부 스타일시트에 포함하는 대신 기본 문서에
@font-face및font-family선언을 인라인하면 브라우저에서 별도의 스타일시트 파일이 다운로드될 때까지 기다릴 필요 없이 페이지에서 사용할 글꼴 파일을 결정할 수 있습니다. 이는 일반적으로 브라우저가 페이지에서 사용된다는 사실을 확인하기 전까지 글꼴 파일을 다운로드하지 않기 때문에 중요합니다. 대부분의 상황에서 인라인 글꼴 선언은preload를 사용하여 글꼴을 로드하는 것보다 좋습니다.WOFF2: 최신 글꼴 글꼴 중에서 WOFF2가 가장 최신 글꼴로, 가장 광범위한 브라우저를 지원하며 최상의 압축을 제공합니다. Brotli를 사용하기 때문에 WOFF2는 WOFF보다 30% 더 압축됩니다.
성능을 더욱 개선하려면 글꼴 하위 설정을 사용해 보세요. 글꼴 하위 설정은 일반적으로 사용되지 않는 글리프를 삭제하기 위해 글꼴 파일을 더 작은 하위 집합으로 나누는 방법입니다. 이렇게 하면 글꼴의 파일 크기를 크게 줄일 수 있습니다. 글꼴 하위 집합을 만드는 도구로는 fontkit, subfont, glyphhanger가 있습니다.
자체 호스팅 글꼴의 권장사항에 관한 자세한 내용은 자체 호스팅 글꼴 사용을 참고하세요.
예:
HTML
<head>
<style>
@font-face {
font-family: 'Google Sans';
src: url("Google Sans.woff2") format('woff2');
font-display: swap;
}
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Google Sans', sans-serif;
font-size: 3em;
}
</style>
</head>