이 문서에서는 Google Fonts API로 웹 글꼴을 요청할 때 보이지 않는 곳에서 일어나는 일에 관한 몇 가지 기술 정보를 제공합니다.
이 문서에서는 브라우저별 동작에 대한 정보도 제공합니다.
Fonts API만 사용하고 싶다면 이 페이지를 읽을 필요가 없습니다. 그러나 이 페이지를 읽으면 페이지 로드 성능을 개선하는 데 도움이 될 수 있습니다.
Google Fonts API란 무엇인가요?
브라우저가 웹페이지의 <link> 태그에 지정된 대로 Fonts API 스타일시트에 관한 요청을 보내면 Fonts API는 요청을 생성하는 특정 사용자 에이전트를 위해 생성된 스타일시트를 제공합니다.
예를 들어 Firefox에서 Inconsolata로 요청하면 다음 CSS가 반환됩니다.
@font-face {
font-family: 'Inconsolata';
src: local('Inconsolata'), url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw') format('truetype');
}
반면에 Internet Explorer에서는 다음을 반환합니다.
@font-face {
font-family: 'Inconsolata';
src: url('https://themes.googleusercontent.com/fonts/font?kit=J_eeEGgHN8Gk3Eud0dz8jw');
}
CSS를 다운로드한 후 브라우저에서 브라우저에 적합한 형식으로 글꼴을 다운로드합니다.
브라우저별 동작
이 섹션에서는 웹 글꼴의 각 브라우저 기본 동작을 설명합니다. 이러한 동작은 웹 글꼴 로더를 사용하여 제어할 수 있습니다.
지원되는 브라우저 목록은 FAQ를 참고하세요.
Chrome
Chrome은 페이지의 나머지 부분을 렌더링하지만 글꼴이 로드될 때까지 글꼴을 사용하는 텍스트 대신 빈 공간을 표시합니다.
Mozilla Firefox
Firefox는 먼저 텍스트를 기본 글꼴로 표시한 후 텍스트가 로드되면 글꼴로 다시 렌더링합니다. 이 동작을 '스타일이 지정되지 않은 텍스트 플래시'라고 합니다.
Apple Safari
Safari는 페이지의 나머지 부분을 렌더링하지만, 글꼴이 로드될 때까지 글꼴을 사용하는 텍스트 대신 빈 공간을 표시합니다.
Microsoft Internet Explorer
Internet Explorer는 페이지의 나머지 부분을 렌더링하지만 글꼴이 로드될 때까지 글꼴을 사용하는 텍스트 대신 빈 공간을 표시합니다.
더 일반적으로는 Internet Explorer의 동작은 다양한 요소의 배치 및 존재에 따라 달라질 수 있습니다. 모든 브라우저에서 일관된 동작을 제공하려면 웹 글꼴 로더를 사용하세요. 예를 들어 모든 브라우저가 Firefox처럼 작동하도록 선택할 수 있습니다.