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

Używam @font-face na stronie mojej firmy i działa / wygląda świetnie. Z tym, że Firefox i Chrome wyrzucą błąd 404 w pliku .woff. IE nie wyrzuca 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 usuń te czcionki z mojego pliku css, nie dostaję 404, więc wiem, że nie jest to błąd składni.

Użyłem również narzędzia fontsquirrels do stworzenia czcionek @font-face 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;
}
Author: Mosh Feu, 2010-10-25
Source

14 answers

Doświadczałem tego samego objawu-404 na plikach WOFF w Chrome - i uruchamiałem aplikację na serwerze Windows 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 pomocą Menedżera IIS (zakładka nagłówki HTTP właściwości witryny): .aplikacja woff / x-WOFF "

Update: zgodnie z typami MIME dla czcionek woff i Grsmto rzeczywisty typ MIME to application / x-font-WOFF (przynajmniej dla Chrome). x-WOFF naprawi Chrome 404s, x-font-WOFF naprawi Ostrzeżenia Chrome.

Od 2017 r. : fonty WOFF zostały znormalizowane jako część specyfikacji RFC8081 do typu mime font/woff i font/woff2.

IIS 6 typów MIME

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

Rozwiązanie 2

Możesz również dodać Typy MIME w Web config : 

  <system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> <!-- In case IIS already has this mime type -->
      <mimeMap fileExtension=".woff" mimeType="font/woff" />
    </staticContent>    
  </system.webServer>
 699
Author: Ian Robinson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-15 08:29:43

Właściwie odpowiedź @ Ian Robinson działa dobrze, ale Chrome będzie nadal narzekać z tym komunikatem : "zasób zinterpretowany jako czcionka, ale przeniesiony za pomocą aplikacji typu MIME / x-WOFF "

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

Application / x-woff

Do

Application / x-font - WOFF

I nie będziesz miał już żadnych błędów konsoli Chrome !

(testowane na Chrome 17)

 44
Author: Grsmto,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-28 14:58:58

Odpowiedź na ten post była bardzo pomocna i duża oszczędność czasu. Jednak okazało się, że podczas korzystania z FontAwesome 4.50, musiałem dodać dodatkową konfigurację dla rozszerzenia typu woff2 również jak pokazano poniżej inne żądania dla typu woff2 dawały błąd 404 w narzędziach programistycznych Chrome pod konsola> błędy.

Zgodnie z komentarzem S. Serp, poniższą konfigurację należy umieścić w tagu <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>
 43
Author: Sunil,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-01 17:46:26

Rozwiązanie dla IIS7

Również natknąłem się na ten sam problem. Myślę, że zrobienie tej konfiguracji z poziomu serwera byłoby lepsze, ponieważ dotyczy to wszystkich stron internetowych.

  1. Przejdź do IIS root node i kliknij dwukrotnie "typy MIME" Opcja konfiguracji

  2. Kliknij łącze "Dodaj" w panelu Operacje w prawym górnym rogu.

  3. Spowoduje to wywołanie okna dialogowego. Add .rozszerzenie pliku woff i określ "application / x-font-WOFF" as odpowiedni typ MIME.

Dodaj typ MIME dla .rozszerzenie nazwy pliku WOFF

Przejdź do typów MIME

Dodaj typ MIME

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

 13
Author: Dhanuka777,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-31 02:25:10

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

Rozszerzenie nazwy pliku: .woff

Typ MIME : application / octet-stream

 8
Author: Thunder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-11 08:39:36

Oprócz odpowiedzi Iana, musiałem zezwolić rozszerzeniom czcionek w module filtrowania żądań, aby to 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>
 8
Author: martinoss,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-12-02 09:16:10

Próbowałem wielu rzeczy wokół uprawnień, typów mime, itp., ale dla mnie skończyło się na tym, że sieć.config usunął obsługę plików statycznych w IIS, a następnie wyraźnie dodał ją z powrotem dla katalogów, które mają pliki statyczne. Gdy tylko dodałem węzeł lokalizacji do mojego katalogu i dodałem z powrotem obsługę, żądania przestały otrzymywać 404s.

 1
Author: Matt,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-11-11 15:36:44

Jeśli używasz CodeIgniter pod IIS7:

W sieci.plik konfiguracyjny, 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 !
 1
Author: IvanJijon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-06-14 11:13:06

Rozwiązany:

Musiałem użyć metody Mo ' Bulletproofer

 0
Author: dcp3450,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-10-25 15:27:44

To może być oczywiste, ale to potknęło mnie z 404s wiele razy... Upewnij się, że uprawnienia folderu czcionki są ustawione poprawnie.

 0
Author: Ecksley,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-11-19 18:24:25

Sprawdź również swój URL rewriter. Może rzucić 404, jeśli coś" dziwnego " zostało znalezione.

 0
Author: Dmitriy Romanov,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-29 16:13:17

Jeśli nie masz dostępu do konfiguracji serwera www, możesz również zmienić nazwę pliku czcionki tak, aby kończył się na svg(ale zachowaj format). Działa dobrze dla mnie w Chrome i Firefox.

 0
Author: Phil McCarty,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-19 11:30:38

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

Tutaj wpisz opis obrazka

 0
Author: Thinira,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-09 11:05:48

IIS typ Mime: .WOFF font/x-WOFF (nie application/x-WOFF, lub application/x-font-WOFF)

 -1
Author: dhaworth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-06-05 13:33:36