글꼴을 빠르게 제공하는 것은 매우 중요합니다. 글꼴 전달 속도가 빠르면 텍스트가 사용자에게 더 빨리 표시될 뿐만 아니라 글꼴로 인해 레이아웃 변경이 발생하는지 여부에도 큰 영향을 미칩니다. 필요하기 전에 글꼴을 제공할 수 없는 경우 일반적으로 글꼴이 전환될 때 레이아웃이 변경됩니다. 이 레이아웃 변경의 크기는 대체 글꼴이 웹 글꼴과 얼마나 가깝게 일치하는지에 따라 달라질 수 있습니다. 이 현상을 실제로 확인하려면 데모를 보고 고속 연결과 느린 연결에서 발생하는 레이아웃 변경을 비교하세요.
아래 예에서는 인라인 글꼴 선언 사용과 preconnect 리소스 힌트 사용이라는 두 가지 성능 기법을 결합하여 서드 파티 글꼴을 최대한 빠르게 로드합니다. 이 코드 스니펫은 Google Fonts에서 글꼴을 로드하는 방법을 보여주지만, 이 기법은 다른 서드 파티 글꼴 제공업체에도 적용됩니다.
인라인 글꼴 선언: 이 정보를 외부 스타일시트에 포함하는 대신 기본 문서에
font-family선언을 삽입하면 브라우저가 별도의 스타일시트 파일이 다운로드될 때까지 기다릴 필요 없이 페이지에서 사용할 글꼴 파일을 결정할 수 있습니다. 이는 일반적으로 브라우저가 페이지에서 사용된다는 사실을 확인하기 전까지 글꼴 파일을 다운로드하지 않기 때문에 중요합니다. 대부분의 상황에서 인라인 글꼴 선언은preload를 사용하여 글꼴을 로드하는 것보다 좋습니다.Preconnect: Google Fonts를 로드하는 데 권장되는 방법은
<link>태그를preconnect리소스 힌트와 함께 사용하는 것입니다.preconnect리소스 힌트는 서드 파티 출처와의 조기 연결을 설정합니다. 아래의 코드 스니펫에서 첫 번째 리소스 힌트는 글꼴 스타일시트 다운로드를 위한 연결을 설정하고 두 번째 리소스 힌트는 글꼴 파일을 다운로드하기 위한 연결을 설정합니다.
예:
HTML
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Zen+Tokyo+Zoo&display=swap" rel="stylesheet">
<style>
body {
font-family: system-ui;
font-size: 1em;
}
h1 {
font-family: 'Zen Tokyo Zoo', sans-serif;
font-size: 3em;
}
</style>
</head>