내 글꼴은 Chrome에서는로드되지만 Firefox 또는 다른 모바일 브라우저에서는로드되지 않습니다.

Question

내 웹 사이트를 다시 작성하고 있으며 'KlartextMono-Light'라는 글꼴을 사용하고 있습니다. Chrome에는로드되지만 Firefox (v45.0.2) 또는 다른 모바일 브라우저에는로드되지 않습니다.

@font-face { 
    font-family: 'klartext_monolight'; 
    src: url('../fonts/KlartextMono-Light-webfont.eot'); 
    src: local('☺'), 
    url('../fonts/KlartextMono-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/KlartextMono-Light-webfont.woff2') format('woff2'), 
    url('../fonts/KlartextMono-Light-webfont.woff') format('woff'), 
    url('../fonts/KlartextMono-Light-webfont.ttf') format('truetype'), 
    url('../fonts/KlartextMono-Light-webfont.svg#klartext_monolight') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

: 나는 포럼의 무리를보고 시도했지만 내가 본 수정은 내 CSS를 폴더에 'fonts.css'파일이

을 근무 한 적이없는,이 코드입니다

그 유형의 모든 버전이있는 별도의 글꼴 폴더가 있습니다. 다음과 같습니다

h1, h2, h3, h4, h5, h6, p{ 
    font-family: KlartextMono-Light; 
    margin: 0; 
    text-rendering: optimizeLegibility; 
    -webkit-font-smoothing: antialiased; 
} 

그리고 글꼴을로드 내 HTML 헤더의 부분 :

<!-- Fonts 
------------------------------------------- --> 
<link rel="stylesheet" href="css/fonts.css"> 

<!-- Css 
------------------------------------------- --> 
<!-- Bootstrap --> 
<link href="css/bootstrap.min.css" rel="stylesheet"> 

<link rel="stylesheet" href="css/reset.css"> 
<link rel="stylesheet" href="css/normalize.css"> 
<link rel="stylesheet" href="css/style.css"> 

글꼴 렌더링

내 주요 '있는 style.css'는 글꼴이 방법을 호출 Chrome에서는 완벽하지만 Firefox 나 내 휴대 기기에서는 작동하지 않습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까?

Answer 1

font-family 속성을 호출 할 때 잘못된 글꼴 이름을 사용하고있는 것처럼 보입니다. 글꼴을 선언 할 때는 klartext_monolight이라고하지만, CSS에서는 KlartextMono-Light이라고합니다. 원래 선언 된 같은 이름을 사용 : 호출 ... 당신이 잘못된 웹 폰트를 참조하기 때문에 내가 생각

h1, h2, h3, h4, h5, h6 { 
    font-family: 'klartext_monolight'; 
} 

Answer 2

이 당신의 CSS에서

을

font-family: "KlartextMono-Light" 

글꼴을 실제로 호출 할 때 klartext_monolight

변경하면 어떻게되는지 확인