기술적 고려사항

이 문서에서는 이 과정에 대한 기술적 정보를 제공합니다. 장면을 보여줍니다.

이 문서에서는 브라우저별 동작에 대한 정보도 제공합니다.

Fonts API만 사용하려는 경우에는 이 페이지를 읽지 않아도 됩니다. 하지만 이 페이지를 읽어보면 페이지 로드 성능을 개선하는 데 도움이 될 수도 있습니다.

Google Fonts API 기능 제공

브라우저가 Fonts API 스타일시트( <link> 태그)가 포함된 경우 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를 다운로드하면 브라우저가 적절한 파일 형식을 선택합니다.

브라우저별 동작

이 섹션에서는 각 브라우저의 기본 웹 글꼴 동작을 설명합니다. 참고: API 키를 사용하여 이러한 동작을 웹 글꼴 로더.

지원되는 브라우저 목록은 FAQ.

Chrome

Chrome에서 페이지의 나머지 부분을 렌더링하지만 글꼴이 로드될 때까지 글꼴을 사용하는 텍스트 자리에 빈 공간을 추가합니다.

Mozilla Firefox

Firefox는 먼저 기본 글꼴로 텍스트를 표시한 다음 반환합니다. 이 동작을 '스타일이 지정되지 않은 플래시의 플래시'라고 함 있습니다."

Apple Safari

Safari가 페이지의 나머지 부분을 렌더링하지만 글꼴이 로드될 때까지 글꼴을 사용하는 텍스트 자리에 빈 공간을 추가합니다.

Microsoft Internet Explorer

Internet Explorer는 페이지의 나머지 부분을 렌더링하지만 글꼴이 로드될 때까지 글꼴을 사용하는 텍스트 대신 빈 공간이 표시됩니다.

보다 일반적으로는 Internet Explorer의 동작이 웹 애플리케이션의 위치에 따라 존재할 수 있다는 것입니다. 일관된 동작을 제공하려는 경우 웹 글꼴 로더를 사용하세요. 대상 예를 들어 모든 브라우저가 Firefox처럼 작동하도록 합니다.