Używam @font-facena stronie mojej firmy i działa / wygląda świetnie. Z wyjątkiem Firefoksa i Chrome zgłosi błąd 404 na .woffpliku. IE nie zgłasza błędu. Mam czcionki znajdujące się w katalogu głównym, ale próbowałem z czcionkami w folderze css, a nawet podałem cały adres URL czcionki. Jeśli usunę te czcionki z mojego pliku css, nie otrzymam 404, więc wiem, że nie jest to błąd składniowy.

Ponadto użyłem narzędzia fontsquirrels do stworzenia @font-faceczcionek i kodu:

@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;
}

Miałem ten sam objaw - 404 na plikach Woff w Chrome - i działałem na Windows Server z IIS 6.

Jeśli jesteś w tej samej sytuacji, możesz to naprawić, wykonując następujące czynności:

Rozwiązanie 1

„Wystarczy dodać następujące deklaracje typu MIME za pośrednictwem Menedżera usług IIS (karta Nagłówki HTTP właściwości witryny): .woff application / x-woff ”

Aktualizacja: zgodnie z typami MIME czcionek woff i Grsmto rzeczywistym typem MIME jest application / x-font-woff (przynajmniej dla Chrome). x-woff naprawi Chrome 404, x-font-woff naprawi ostrzeżenia Chrome.

Począwszy od 2017 r . : Czcionki Woff zostały znormalizowane jako część specyfikacji RFC8081 do typu MIME font/woffi font/woff2.

Dzięki Seb Duggan: http://sebduggan.com/posts/serving-web-fonts-from-iis

Rozwiązanie 2

Możesz także dodać typy MIME w konfiguracji sieci :

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

Odpowiedź na ten post była bardzo pomocna i pozwoliła zaoszczędzić dużo czasu. Stwierdziłem jednak, że podczas używania FontAwesome 4.50musiałem dodać dodatkową konfigurację woff2typu rozszerzenia, jak pokazano poniżej, w przeciwnym razie żądania woff2typu spowodowały błąd 404 w Narzędziach programisty Chrome w obszarze Konsola> Błędy.

Zgodnie z komentarzem S.Serp, poniższą konfigurację należy umieścić w <system.webServer>tagu.

<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>

Właściwie odpowiedź @Ian Robinson działa dobrze, ale Chrome będzie nadal narzekał na ten komunikat: „ Zasób interpretowany jako czcionka, ale przesłany za pomocą aplikacji typu MIME / x-woff ”

Jeśli to otrzymasz, możesz zmienić z

application / x-woff

do

application / x -font -woff

i nie będziesz już mieć żadnych błędów konsoli Chrome!

(testowany na Chrome 17)

Rozwiązanie dla IIS7

Natknąłem się również na ten sam problem. Myślę, że ta konfiguracja z poziomu serwera byłaby lepsza, ponieważ dotyczy wszystkich stron internetowych.

1. Przejdź do węzła głównego IIS i kliknij dwukrotnie opcję konfiguracji „Typy MIME”

2. Kliknij link „Dodaj” w panelu Operacje w prawym górnym rogu.

3. Spowoduje to wyświetlenie okna dialogowego. Dodaj rozszerzenie pliku .woff i określ „application / x-font-woff” jako odpowiedni typ MIME.

Dodaj typ MIME dla rozszerzenia nazwy pliku .woff

Oto, co zrobiłem, aby rozwiązać problem w IIS 7

Oprócz odpowiedzi Iana musiałem zezwolić na rozszerzenia czcionek w module filtrowania żądań, aby działało.

<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>

Uruchom Menedżera serwera IIS (polecenie uruchomienia: inetmgr) Otwórz Typy Mime i dodaj następujące

Rozszerzenie nazwy pliku: .woff

Typ MIME : application / octet-stream

Próbowałem wielu rzeczy związanych z uprawnieniami, typami MIME itp., Ale dla mnie skończyło się to tym, że web.config usunął program obsługi plików statycznych w IIS, a następnie jawnie dodał go z powrotem dla katalogów, które miałyby pliki statyczne. Gdy tylko dodałem węzeł lokalizacji do mojego katalogu i dodałem moduł obsługi z powrotem, żądania przestały otrzymywać 404s.

Jeśli używasz CodeIgniter w IIS7:

W pliku web.config dodaj woff do wzorca

<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>

Mam nadzieję, że to pomoże !

Może to być oczywiste, ale kilkakrotnie potknąłem się o 404s ... Upewnij się, że uprawnienia do folderu czcionek są ustawione poprawnie.

Sprawdź także przepisujący adres URL. Może wyrzucić 404, jeśli znaleziono coś „dziwnego”.

Jeśli nie masz dostępu do swojej konfiguracji serwera WWW, możesz również ZMIEŃ NAZWĘ pliku czcionek, aby kończył się svg (ale zachowaj format). Działa dla mnie dobrze w Chrome i Firefox.

Jeśli nadal nie działa po dodaniu typów MIME, sprawdź, czy „Anonimowe uwierzytelnianie” jest włączone w sekcji Uwierzytelnianie w witrynie i upewnij się, że wybrano „Tożsamość puli aplikacji” zgodnie z danym zrzutem ekranu.

Typ Mime IIS: .woff font / x-woff (nie application / x-woff lub application / x-font-woff)

Rozwiązałem to:

Musiałem użyć metody Mo'Bulletproofer