교차 출처 리소스 공유 (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 Console에서 관련 경고 메시지를 확인합니다.
Firefox에서는 Firebug 및 Live HTTP Headers 확장 프로그램을 사용하여 응답 헤더를 보고 CORS 응답 헤더가 있는지 확인할 수 있습니다.
링크
NoScript 플러그인이 설치되어 있으면 Firefox에서 웹 글꼴이 표시되지 않습니다.
브라우저: * Firefox (3.5 이상)
개요
NoScript 플러그인이 설치된 경우 Firefox가 웹 글꼴을 표시하지 않습니다.
잠재적 원인
기본적으로 NoScript 플러그인은 @font-face 규칙을 사용 중지합니다.
솔루션
NoScript 옵션을 열고 Embeddings 탭으로 이동하여 Forbid @font-face를 선택 해제합니다.
웹 글꼴이 표시되지 않음
브라우저: * 전체
개요
사용된 웹 글꼴이 표시되지 않습니다.
잠재적 원인
API URL에 오류가 있거나 글꼴에서 지원하지 않는 스타일이 요청되었습니다.
솔루션
URL의 형식이 올바르게 지정되었는지 확인하고, 글꼴 이름 (예: Droid Serif가 droid serif)을 따르지 않도록 하고, 가중치와 스타일의 구문은 물론 여러 가족을 로드하는 구문을 준수해야 합니다 (문서 문서 - 구문 참고). 글꼴이 표시되지 않으면 스타일시트의 내용을 보면 무엇이 문제인지에 관한 자세한 정보를 확인할 수 있습니다. 브라우저에 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. */
제목에 사용될 때 웹 글꼴이 두꺼워 보입니다.
브라우저: * 전체
개요
글꼴이 일반 (400) 두께임에도 불구하고 제목 (h1, h2 등)에 사용되면 글꼴이 더 두꺼워 보입니다.
잠재적 원인
브라우저에서 텍스트가 자동으로 굵게 표시됩니다.
솔루션
헤더에 글꼴을 적용할 때 CSS 규칙에 올바른 글꼴 두께가 지정되어 있는지 확인합니다.
h1 {
font-family: Lobster, cursive;
font-weight: 400;
}