이 예제에서 @ font-face가 작동하지 않는 이유는 무엇입니까?

Question

저는 jsfiddle을 기본 @ font-face CSS와 h2로 설정했습니다. css가 참조하고있는 글꼴 파일은 모두 서버에 있습니다. 그러나 woff 파일의 URL을 입력하면 찾을 수 없습니다. 나는 그 파일이 가리키는 위치에 정확히 존재하는지 트리플을 확인했지만, URL 바에 입력하여 woff 파일을 볼 수 없다고 생각합니다 (편집 : svg와 동일).

그래서이 jsfiddle의 글꼴이 공개되지 않는 이유는 무엇입니까?

http://jsfiddle.net/rw2sbq8y/1/

HTML을

h2 { 
    font-family:'open sans-test'; 
    font-size:24px; 
    font-weight:normal; 
} 

@font-face { 
    font-family: 'open sans-test'; 
    src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot'); 
    src: url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.woff') format('woff'), 
     url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.ttf') format('truetype'), 
     url('http://www.drtvproductsummit.com/fonts/opensans-regular-webfont.svg#open_sansregular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

(내가 현재 일하고 있어요 웹 사이트의 글꼴에 문제가 오전과 내가 여기이 비트를 생각

CSS를

<h2>Search for inventions</h2> 

입니다

그것을 고정하는 첫 번째 단계)

Answer 1

서버가 글꼴을 호스팅하고 있습니까? ver 또는 CDN과 같은 타사 서버입니까?

내가 너라면, 이전에 만났던 공통적 인 문제는 서버가 글꼴을 제공하는 방법을 모른다는 것입니다.

일반적으로 각 글꼴 형식 유형 inc에 대한 MIME 형식을 추가하는 것은 간단합니다. EOT, WOF 등. 서버.

서버 유형 (예 : IIS 또는 Apache 또는 다른 경우)에 대해이를 수행하는 방법에 대한 Google 검색을 수행해야합니다.

예 : "MIME 유형을 IIS에 추가하는 방법"

검색을 수행하여 각 글꼴 형식에 대한 올바른 MIME 형식을 찾을 수도 있습니다. 결과는 찾기 쉽지만 다음은 유효한 MIME 유형 목록입니다 (목록에서 필요한 항목 만 찾으십시오). http://www.freeformatter.com/mime-types-list.html