Nie udało się zdekodować pobranej czcionki

Jest to błąd, który otrzymuję w Chrome i niestety jego wyszukiwanie nie dało mi zbyt wielu wyników. Sama czcionka wygląda poprawnie. Jednak nadal otrzymuję ten błąd / ostrzeżenie. Dokładniej mówiąc, jest to pełne ostrzeżenie:

„Nie udało się zdekodować pobranej czcionki: http: // localhost: 8000 / app / fonts / Lato / ”

Moje CSS to:

@font-face {
    font-family:"Lato";
    src: url("../fonts/Lato/");
}

html, body {
    font-family:'Lato';
}

Po prostu nie rozumiem. Czcionka jest stosowana poprawnie, ale ostrzeżenie jest zawsze widoczne. Próba użycia Sans-Serifpowoduje, że czcionka powraca do normalnej czcionki przeglądarki, więc może to być to, ale nie jestem pewien, a nawet po przeszukaniu nic nie znalazłem. Dzięki!

EDYTOWAĆ

Istnieją różne pliki czcionek, wszystkie z tej samej rodziny. Próbuję je wszystkie załadować. Pliki czcionek to .ttf. Wczytuję je z foldera lokalnego i istnieją różne czcionki-files, jak Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfitd.

W regule css musisz dodać rozszerzenie pliku. Ten przykład z najgłębszym możliwym wsparciem:

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

EDYTOWAĆ:

„Nie udało się zdekodować pobranej czcionki” oznacza, że ​​czcionka jest uszkodzona lub niekompletna (brak danych, niezbędne tabele, rekordy nazewnictwa, milion możliwych rzeczy).

Czasami ten problem jest spowodowany przez samą czcionkę. Czcionka Google zapewnia odpowiednią czcionkę, której potrzebujesz, ale jeśli krój czcionki jest potrzebny, używam Transfontera do generowania wszystkich formatów czcionek.

Czasami klient FTP uszkadza plik (nie w tym przypadku, ponieważ znajduje się na lokalnym komputerze). Pamiętaj, aby przesłać plik binarny, a nie ASCII.

Wystąpił podobny problem w programie Visual Studio, który był spowodowany nieprawidłową url()ścieżką do danej czcionki.

Przestałem otrzymywać ten błąd po zmianie (na przykład):

@@font-face{
    font-family: "Example Font";
    src: url("/Fonts/ExampleFont.eot?#iefix");

do tego:

@@font-face{
    font-family: "Example Font";
    src: url("../fonts/ExampleFont.eot?#iefix");

Zmień format („woff”) na format („font-woff”), pomóż mi teraz rozwiązać ten problem.

Po prostu zmień małą zmianę tutaj z odpowiedzi Germano Plebani

 @font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('font-woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Sprawdź, czy źródła przeglądarki mogą go otworzyć i jaki jest typ

Upewnij się, że Twój serwer wysyła pliki czcionek z odpowiednim typem MIME .

Ostatnio mam ten sam problem podczas używania nginx, ponieważ w jego /etc/nginx/mime.typespliku waniliowym brakuje niektórych typów czcionek mime .

Naprawiłem problem dodając brakujące typy MIME w miejscu, w którym ich potrzebowałem:

location /app/fonts/ {

  #Fonts dir
  alias /var/www/app/fonts/;

  #Include vanilla types
  include mime.types;

  #Missing mime types
  types  {font/truetype ttf;}
  types  {application/font-woff woff;}
  types  {application/font-woff2 woff2;}
}

Możesz również sprawdzić to, aby rozszerzyć mime.types w nginx: rozszerzenie domyślnego pliku nginx mime.types

Musiałem dodać type="text/css"do mojego tagu linku. Zmieniłem to z:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet">

do:

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700" rel="stylesheet" type="text/css">

Po zmianie błąd zniknął.

Po prostu miałem ten sam problem i rozwiązałem go, zmieniając

src: url("Roboto-Medium-webfont.eot?#iefix")

do

src: url("Roboto-Medium-webfont.eot?#iefix") format('embedded-opentype')

W moim przypadku ten błąd występował, gdy odwoływałem się do czcionki Google przy użyciu protokołu https. Kiedy przeszedłem na http, błąd zniknął. (i tak, próbowałem tego wiele razy, aby potwierdzić, że to była przyczyna)

Więc zmieniłem:

@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

Do:

@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,100,500,900);

Czasami ten problem występuje, gdy przesyłasz / pobierasz czcionki przy użyciu niewłaściwej metody FTP. Czcionki muszą być przesłane przez FTP przy użyciu metody binarnej, a nie ASCII. (W zależności od twojego nastroju może to wydawać się sprzeczne z intuicją, lol). Jeśli ftp pliki czcionek przy użyciu metody ASCII, możesz otrzymać ten komunikat o błędzie. Jeśli ftpujesz swoje pliki metodą „auto” i otrzymujesz ten komunikat o błędzie, spróbuj wymusić użycie metody binarnej przez ftp.

Miałem ten sam problem z czcionką awesome v4.4 i naprawiłem go, usuwając format woff2. Otrzymałem ostrzeżenie tylko w przeglądarce Chrome.

@font-face {
  font-family: 'FontAwesome';
  src: url('../fonts/fontawesome-webfont.eot?v=4.4.0');
  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.4.0') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff?v=4.4.0') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.4.0') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular') format('svg');
  font-weight: normal;
  font-style: normal;
}

W moim przypadku było to spowodowane nieprawidłowym plikiem ścieżki w .htaccess. sprawdź poprawność ścieżki do pliku.

Dla mnie błędem było to, że zapomniałem przełączyć FTP w tryb binarny przed załadowaniem plików czcionek.

Edytować

Możesz to sprawdzić, przesyłając inne typy danych binarnych, takie jak obrazy. Jeśli również się nie wyświetlają, może to być problem.

Miałem też ten sam problem, ale rozwiązałem go, dodając `` Content-Type '': `` application / x-font-ttf '' w nagłówku odpowiedzi dla wszystkich plików .ttf

W moim przypadku było to spowodowane utworzeniem pliku poprawki SVN, który obejmował dodanie plików czcionek. Tak jak to:

1. Dodaj pliki czcionek z lokalnego systemu plików do linii głównej o obniżonej wersji
2. Bagażnik działa zgodnie z oczekiwaniami
3. Utwórz łatę SVN zawierającą zmiany linii głównej, aby uwzględnić dodanie plików czcionek
4. Zastosuj łatkę do innej gałęzi
5. Pliki czcionek są dodawane do gałęzi o obniżonej wersji (i mogą zostać zatwierdzone), ale są uszkodzone, powodując błąd w OP.

Rozwiązaniem było przesłanie plików czcionek bezpośrednio do oddziału z mojego lokalnego systemu plików. Zakładam, że stało się tak, ponieważ pliki łat SVN muszą konwertować wszystko do formatu ASCII i niekoniecznie muszą zachowywać pliki binarne dla plików czcionek. Ale to tylko przypuszczenie.

W moim przypadku - używając React with Gatsby - problem został rozwiązany poprzez podwójne sprawdzenie wszystkich moich ścieżek. Używałem React / Gatsby z Sassem, a pliki źródłowe Gatsby szukały czcionek w innym miejscu niż skompilowane pliki. Gdy zduplikowałem pliki w każdej ścieżce, problem zniknął.

W moim przypadku podczas pobierania szablonu pliki czcionek były po prostu pustymi plikami. Prawdopodobnie problem z pobieraniem. Chrome dał o tym ten ogólny błąd. Na początku myślałem, że rozwiązanie polegające na zmianie z woffna font-woffgo rozwiązało, ale spowodowało to tylko, że Chrome zignorował czcionki. Moim rozwiązaniem było znajdowanie czcionek jeden po drugim i pobieranie / zastępowanie ich.

Jeśli używasz express, musisz zezwolić na obsługę statycznej treści, dodając coś takiego: var server = express (); server.use (express.static („./ public”)); // gdzie public to folder główny aplikacji, z zawartymi w nim czcionkami, na dowolnym poziomie, np. public / fonts lub public / dist / fonts ... // Jeśli używasz connect, Google dla podobnej konfiguracji.

Używam .Net Framework 4.5 / IIS 7

Aby to naprawić umieściłem plik Web.config w folderze z plikiem czcionki.

Zawartość Web.config:

<?xml version="1.0"?>
<configuration>
  <system.web>
    <authorization>
      <allow users="*" />
    </authorization>
  </system.web>
</configuration>

dla mnie był to problem z plikami lfs, które nie zostały pobrane

git lfs fetch --all

naprawiono problem.

zobacz https://github.com/git-lfs/git-lfs/issues/325

Jeśli znajduje się na serwerze (nie na hoście lokalnym), spróbuj ręcznie załadować czcionki, ponieważ czasami klient FTP (na przykład FileZilla) uszkadza pliki i może powodować problem. U mnie wgrywałem ręcznie za pomocą interfejsu Cpanel.

Mój przypadek wyglądał podobnie, ale czcionka była uszkodzona (i niemożliwa do zdekodowania). Było to spowodowane konfiguracją w maven. Dodanie nonFilteredFileExtension dla rozszerzeń czcionek maven-resources-pluginpomogło mi:

<plugin>
    <groupId>org.apache.maven.plugins</groupId>
    <artifactId>maven-resources-plugin</artifactId>
    <configuration>
        <nonFilteredFileExtensions>
            <nonFilteredFileExtension>ttf</nonFilteredFileExtension>
            <nonFilteredFileExtension>otf</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff</nonFilteredFileExtension>
            <nonFilteredFileExtension>woff2</nonFilteredFileExtension>
            <nonFilteredFileExtension>eot</nonFilteredFileExtension>
        </nonFilteredFileExtensions>
    </configuration>
</plugin>