교차 출처 리소스 공유 (CORS) 응답 헤더 누락
브라우저:
- Firefox (3.5 이상)
- Internet Explorer (9 이상)
- Chrome (37 이상)
개요
Chrome, Firefox 및 최신 버전의 Internet Explorer에서 교차 출처 적용 리소스 공유 표준이며, 따라서 적절한 "Access-Control-Allow-Origin" 응답 헤더를 통해 구성되어야 합니다. Google Fonts가 모든 도메인에서 볼 수 있는 경우 글꼴은 다음과 같은 응답으로 제공됩니다. 헤더:
Access-Control-Allow-Origin:*
잠재적 원인
일부 프록시는 응답에서 헤더를 제거한 후 브라우저가 글꼴을 렌더링하지 않습니다.
진단 중
Chrome에서는 브라우저 툴바에서 관련 경고 메시지를 DevTools 콘솔.
Firefox에서는 Firebug 또는 Live HTTP 헤더 확장 프로그램을 사용하여 응답 헤더를 보고 CORS 응답 헤더가 있는지 확인합니다.
링크
NoScript 플러그인이 설치되어 있을 때 Firefox에 웹 글꼴이 표시되지 않음
브라우저: * Firefox (3.5 이상)
개요
NoScript 플러그인이 설치되어 있을 때 Firefox가 웹 글꼴을 표시하지 않습니다.
잠재적 원인
기본적으로 NoScript 플러그인은 @font-face 규칙을 사용 중지합니다.
솔루션
NoScript 옵션을 열고 임베딩 탭으로 이동하여 '금지'를 선택 취소합니다. @글꼴-얼굴
웹 글꼴이 표시되지 않음
브라우저: * 전체
개요
사용된 웹 글꼴이 표시되지 않습니다.
잠재적 원인
API URL에 오류가 있거나 글꼴에서 지원하지 않는 스타일이 있습니다. 이(가) 요청되었습니다.
솔루션
URL 형식이 올바르고 가중치 구문이 여러 계열을 로드하는 문법뿐만 아니라( 문서: 시작하기 - 구문 글꼴이 표시되지 않을 때 스타일시트의 내용을 보면 더 자세한 정보를 얻을 수 있습니다. URL을 복사하여 오류 메시지가 없는지 확인합니다. 예를 들어 지원되지 않는 체중 Droid Serif가 다음과 같은 오류 메시지가 표시됩니다.
/* Droid Serif (style: normal, weight: 300) is not available */ /* However, style: normal, weight: normal is available */ /* However, style: italic, weight: normal is available */ /* However, style: normal, weight: bold is available */ /* However, style: italic, weight: bold is available */ /* Not supported. */
제목에 사용할 때 웹 글꼴이 두꺼워짐
브라우저: * 전체
개요
제목 (h1, h2 등)에 사용하면 글꼴이 정상 (400) 무게입니다.
잠재적 원인
브라우저에서 텍스트를 자동으로 굵게 표시했습니다.
솔루션
텍스트, 이미지, 오디오, 헤더에 글꼴 적용:
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}