Dlaczego @ font-face zgłasza błąd 404 na plikach woff?

422

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;
}
dcp3450
źródło
jaką masz wersję dla Firefoxa i Chrome? Gecko 1.9.2 (Firefox 3.6) dodaje obsługę WOFF.
Sotiris,
Spróbuj ponownie przekonwertować na OTF w Woff. Miałem podobny problem i parsowanie plików było uszkodzone. To dobra strona do konwersji na różne typy czcionek. onlinefontconverter.com
stacksonstacksonstacks

Odpowiedzi:

722

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.

Typy MIME IIS 6

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>
Ian Robinson
źródło
5
Pamiętaj, że możesz otrzymać błąd z Cannot add duplicate collection entry of type ‘mimeMap’ with unique key attribute ‘fileExtension’...powodu konfliktu z plikiem applicationhost.config. Możesz to naprawić, dodając <remove fileExtension=".woff" />tuż przed określeniem nowej mimeMap w pliku web.config, aby usunąć fałszywy duplikat.
Pete
11
Typ MIME został znormalizowany jako application/font-woff.
Fernando Correia,
5
To załatwiło sprawę! Jeśli masz ten sam problem, ale z plikiem .woff2, po prostu dodaj inny typ MIME (lub config) z tym rozszerzeniem
mapache
2
Wygląda na to, że specyfikacja zmieniła się (ponownie). Twoja rada application/x-font-woffjest teraz nieaktualna, ponieważ w RFC 8081 poprawny typ mime jest teraz font/woffi font/woff2. Zobacz zaktualizowaną odpowiedź w połączonym pytaniu
Liam
3
To rozwiązanie nie działało dla mnie. Jaka była dla mnie sztuczka: hotcakescommerce.zendesk.com/hc/en-us/articles/…
Kim Lage
53

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>
Sunil
źródło
3
a wspomniany tag <staticContent>musi znajdować się wewnątrz <system.webServer>tagu
S.Serpooshan,
działa idealnie dobrze, raportowanie z Windows Server 2012 R2, ASP.Net MVC5.
Cromwell
44

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)

adriendenat
źródło
Gdzie to zmieniasz? W przeglądarce czy na serwerze?
Jake Wilson,
Jak wyjaśniono w powyższej odpowiedzi, musi to być serwer. To rozwiązanie jest przeznaczone dla systemu Windows Server z IIS 6.
adriendenat
1
chrome wciąż narzeka na mnie z x-font-woff
Sonic Soul
Aby powtórzyć mój komentarz : Wygląda na to, że specyfikacja zmieniła się (ponownie). Twoja rada application/x-font-woffjest teraz nieaktualna, ponieważ w RFC 8081 poprawny typ mime jest teraz font/woffi font/woff2. Zobacz zaktualizowaną odpowiedź w połączonym pytaniu
Liam
15

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

Przejdź do typów MIME

Dodaj typ MIME

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

Dhanuka777
źródło
2
Zwróć uwagę, że odradzane są odpowiedzi tylko do linku , więc odpowiedzi SO powinny być punktem końcowym poszukiwania rozwiązania (w porównaniu z kolejnym postojem referencji, które z czasem stają się nieaktualne). Rozważ dodanie tutaj autonomicznego streszczenia, zachowując link jako odniesienie.
kleopatra
@kleopatra - Zaktualizowałem odpowiedź ze szczegółami i usunąłem link.
Dhanuka777
„Myślę, że ta konfiguracja z poziomu serwera byłaby lepsza, ponieważ dotyczy wszystkich stron internetowych”. - cóż, to naprawdę zależy. Jeśli masz do czynienia z serwerem korporacyjnym, który może uruchamiać kilka wewnętrznych aplikacji, tak, masz rację. Z drugiej strony, jeśli prowadzisz publiczną stronę internetową, która jest dystrybuowana na kilku serwerach, metoda web.config wygrywa pod względem „spójności” (tzn. Będzie tam, nie możesz zapomnieć o skonfigurowaniu jej na jednym serwer).
Balázs,
10

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>
martinoss
źródło
8

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

grzmot
źródło
1

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.

Matt
źródło
1

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 !

IvanJijon
źródło
0

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

Ecksley
źródło
0

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

Dmitrij Romanow
źródło
0

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.

Phil McCarty
źródło
0

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.

wprowadź opis zdjęcia tutaj

Thinira
źródło
-1

Rozwiązałem to:

Musiałem użyć metody Mo'Bulletproofer

dcp3450
źródło
Czy to oznacza, że ​​nie używasz już WOFF? Czy to możliwe, że twój serwer nie jest odpowiednio skonfigurowany do obsługi plików WOFF? Np. Patrz: stackoverflow.com/questions/3594823/mime-type-for-woff-fonts/…
mercator
Testowałem czcionkę z kodowaniem na innych maszynach. Wyświetla dobrze i nie ma błędu 404.
dcp3450,
Nie pozwoli mi. Kodowanie jest zbyt długie. Wyjaśniono to tutaj: paulirish.com/2010/font-face-gotchas
dcp3450 25.10.10
1
Link w odpowiedzi już nie istnieje.
Munim Munna