왜 @ font-face가 woff 파일에서 404 오류를 발생 시키는가?

왜 @ font-face가 woff 파일에서 404 오류를 발생 시키는가?

---

내가 사용하고 @font-face내 회사의 사이트에 그것은 큰 / 외모를 작동합니다. Firefox와 Chrome을 제외하고 .woff파일 에서 404 오류가 발생 합니다. IE는 오류를 발생시키지 않습니다. 루트에 글꼴이 있지만 CSS 폴더의 글꼴로 시도하고 글꼴의 전체 URL을 제공했습니다. 내 CSS 파일에서 해당 글꼴을 제거하면 404가 없으므로 구문 오류가 아님을 알 수 있습니다.

또한 fontsquirrels 도구를 사용하여 @font-face글꼴과 코드 를 작성했습니다 .

@font-face {
  font-family: 'LaurenCBrownRegular';
  src: url('/laurencb-webfont.eot');
  src: local('☺'), 
    url('/laurencb-webfont.woff') format('woff'), 
    url('/laurencb-webfont.ttf') format('truetype'), 
    url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FontinSansRegular';
  src: url('/fontin_sans_r_45b-webfont.eot');
  src: local('☺'), 
    url('/fontin_sans_r_45b-webfont.woff') format('woff'), 
    url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), 
    url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg');
  font-weight: normal;
  font-style: normal;
}

---

Chrome에서 woff 파일에 404와 동일한 증상이 발생했으며 IIS 6이 설치된 Windows Server에서 응용 프로그램을 실행 중이었습니다.

동일한 상황에있는 경우 다음을 수행하여 해결할 수 있습니다.

해결책 1

"IIS 관리자 (웹 사이트 속성의 HTTP 헤더 탭)를 통해 다음 MIME 형식 선언을 추가하기 만하면됩니다. .woff application / x-woff "

업데이트 : 에 따라 WOFF 폰트에 대한 MIME 유형 및 Grsmto 실제 MIME 타입이다 (적어도 크롬) 응용 프로그램 / X-글꼴 WOFF. x-woff는 Chrome 404를 수정하고 x-font-woff는 Chrome 경고를 수정합니다.

2017 년 기준 : Woff 글꼴은 이제 RFC8081 사양의 일부로 MIME 유형 font/woff및 으로 표준화되었습니다 font/woff2.

Seb Duggan 덕분에 : http://sebduggan.com/posts/serving-web-fonts-from-iis

해결책 2

웹 설정 에서 MIME 유형을 추가 할 수도 있습니다 .

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>

---

이 게시물에 대한 답변은 매우 도움이되었으며 시간을 크게 절약했습니다. 그러나을 사용할 때 아래에 표시된 것처럼 확장 유형에 FontAwesome 4.50대한 추가 구성을 추가해야한다는 것을 알았습니다. woff2그렇지 않으면 woff2유형 요청 이 Chrome의 개발자 도구에서 콘솔> 오류에 404 오류가 발생했습니다.

S.Serp의 의견에 따르면 아래 구성은 <system.webServer>태그 내에 있어야합니다 .

<staticContent>
  <remove fileExtension=".woff" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
  <remove fileExtension=".woff2" />
  <!-- In case IIS already has this mime type -->
  <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff2" />
</staticContent>

---

실제로 @Ian 로빈슨의 대답은 잘 작동하지만 크롬은 그 메시지와 함께 불평을 계속 : " 자원 글꼴로 해석하지만, MIME 유형 application / x-WOFF로 전송 "

당신이 그것을 얻는다면, 당신은에서 변경할 수 있습니다

응용 프로그램 / x-woff

에

응용 프로그램 / x -font -woff

더 이상 Chrome 콘솔 오류가 없습니다!

(Chrome 17에서 테스트)

---

IIS7 솔루션

나는 또한 같은 문제를 겪었다. 모든 웹 사이트에 적용되므로 서버 수준 에서이 구성을 수행하는 것이 좋습니다.

1. IIS 루트 노드로 이동 하여 "MIME 유형"구성 옵션을 두 번 클릭하십시오.

2. 오른쪽 상단의 액션 패널에서 "추가"링크를 클릭하십시오.

3. 대화 상자가 나타납니다. .woff 파일 확장자를 추가하고 "application / x-font-woff"를 해당 MIME 유형으로 지정하십시오.

.woff 파일 이름 확장자를위한 MIME 유형 추가

다음은 IIS 7의 문제를 해결하기 위해 수행 한 작업입니다.

---

IIS 서버 관리자 실행 (run command : inetmgr) Mime Types를 열고 다음을 추가하십시오.

파일 이름 확장자 : .woff

MIME 유형 : 응용 프로그램 / 옥텟 스트림

---

In addition to Ian's answer, I had to allow the font extensions in the request filtering module to make it work.

<system.webServer>
  <staticContent>
    <remove fileExtension=".woff" />
    <remove fileExtension=".woff2" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
  </staticContent>
  <security>
      <requestFiltering>
          <fileExtensions>
              <add fileExtension=".woff" allowed="true" />
              <add fileExtension=".ttf" allowed="true" />
              <add fileExtension=".woff2" allowed="true" />
          </fileExtensions>
      </requestFiltering>
  </security>    
</system.webServer>

---

I tried a ton of things around permissions, mime types, etc, but for me it ended up being that the web.config had removed the Static file handler in IIS, and then explicitly added it back in for directories that would have static files. As soon as I added a location node for my directory and added the handler back, the requests stopped getting 404s.

---

If you are using CodeIgniter under IIS7 :

In your web.config file, add woff to the pattern

<rule name="Rewrite CI Index">
  <match url=".*" />
    <conditions>
      <add input="{REQUEST_FILENAME}" pattern="css|js|jpg|jpeg|png|gif|ico|htm|html|woff" negate="true" />
    </conditions>
    <action type="Rewrite" url="index.php/{R:0}" />
 </rule>

Hope it helps !

---

This might be obvious, but it has tripped me up with 404s a number of times... Make sure the fonts folder permissions are set correctly.

---

Also check your URL rewriter. It may throw 404 if something "weird" was found.

---

웹 서버 구성에 액세스 할 수없는 경우 글꼴 파일의 이름을 svg로 끝내도록 이름을 바꿀 수도 있습니다 (그러나 형식은 유지). Chrome 및 Firefox에서 제대로 작동합니다.

---

MIME 유형을 추가 한 후에도 여전히 작동하지 않으면 사이트의 인증 섹션에서 "익명 인증"이 활성화되어 있는지 확인하고 주어진 스크린 샷에 따라 "응용 프로그램 풀 ID"를 선택하십시오.

---

그것을 해결 :

Mo'Bulletproofer 방법 을 사용해야 했습니다

---

IIS Mime 유형 : .woff font / x-woff (application / x-woff 또는 application / x-font-woff 아님)

참고 URL : https://stackoverflow.com/questions/4015816/why-is-font-face-throwing-a-404-error-on-woff-files