Nie udało się zdekodować pobranej czcionki

149

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.

Luís Ferreira
źródło
2
Dlaczego końcowy ukośnik w adresie URL? Czy próbujesz załadować wszystkie pliki z katalogu, czy w rzeczywistości jest to przekierowanie do pojedynczego pliku czcionki?
Álvaro González
@ ÁlvaroG.Vicario Cześć, dziękuję za poświęcony czas. Zredagowałem pytanie, aby było jaśniejsze.
Luís Ferreira

Odpowiedzi:

101

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.

Germano Plebani
źródło
Zredagowałem moje pytanie, aby było jaśniejsze. Nie jestem pewien, czy zmieni to cokolwiek w tym, co opublikowałeś. Przepraszamy za bałagan i dziękuję za poświęcony czas.
Luís Ferreira
1
Musisz koniecznie użyć @font face? Wiem, że Lato jest dostępne w czcionkach Google. W każdym razie możesz spróbować tego: font-family: 'Lato'; font-style: normal; font-weight: 400; src: local('Lato Regular'), local('Lato-Regular'), url('../font/file for regular font.wof') format('wof');ten kod dla każdego rodzaju czcionki, zwykłej, pogrubionej itp ...
Germano Plebani
1
Skończyło się na tym, że skorzystałem z opcji czcionek Google i działa dobrze. Dzięki. Przyjąłem twoją odpowiedź.
Luís Ferreira
9
To pytanie jest oznaczone jako „nie udało się zdekodować pobranej czcionki”. Odpowiedź dotyczy konkretnej sytuacji i nie określa w rzeczywistości, co oznacza błąd.
Krii
24

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");
Alex
źródło
1
dla mnie ./ lub ../ nie działało, ale usunięcie / całkowicie działało przeszło z /assets...do assets...Dziękuję bardzo!
Shereef Marzouk
21

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

Fuad Husni
źródło
7
format font-woff jest nieprawidłowy, powinien brzmieć „woff”. Dzięki temu Chrome traktuje czcionkę woff jako nieznany format i przeskakuje do następnego najlepszego formatu (prawdopodobnie ttf z woff2 tutaj)
Arthur
dziękuję bardzo, dzięki temu rozwiązaniu mogłem rozwiązać problem również z innymi formatami (ttf, woff2, ...).
Daleko
5
Niestety ta odpowiedź jest błędna. Może być niejasne, co mówi @Arthur, ale jeśli zmienisz nazwę formatu czcionki, przeglądarka dosłownie zignoruje czcionkę, ponieważ nie zostanie zarejestrowana jako czcionka. W narzędziu do inspekcji Chrome (F12) przejdź do zakładki Aplikacja , a następnie do Ramki> Góra> Czcionki. Spróbuj użyć tego rozwiązania, a zobaczysz, że czcionki zostaną usunięte. Rzadko używam głosów przeciw w SO, ale w tym przypadku odpowiedź faktycznie pogarsza czytelników, ponieważ mogą pomyśleć, że rozwiązali problem, ale tylko go zakamuflowali.
André C. Andersen
To rozwiązało mój problem z importowaniem plików woff w projekcie Nextjs! Wielkie dzięki!
Thanh-Quy Nguyen
Jak mówi @ AndréC.Andersen, TA ODPOWIEDŹ TYLKO KAMUZUJE PROBLEM I NIE NAPRAWIA GO .
JohnK
12

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

Matteo
źródło
12

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ął.

nabjoern
źródło
Dziękuję, działa. Więc jeśli ktoś ładuje czcionki z google po prostu to dodaj, type="text/css"a ostrzeżenie w konsoli przeglądarki zniknie po
``
6

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')
Christian Rauchenwald
źródło
6

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);
Venryx
źródło
3
Otrzymałem również ten sam błąd z czcionkami Google, kiedy ciężko przeładowałem, problem został rozwiązany automatycznie!
Maulik Gangani,
1
-1, przepraszam. nie należy do tego używać drop httpssupport! To sprawia, że ​​Twoja witryna jest niepewna . Obserwacja @MaulikGangani działa! Rozważ włączenie go do swojej odpowiedzi
Ciprian Tomoiagă,
4

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.

Giuseppe
źródło
3

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;
}
Francisco Goldenstein
źródło
1
Tak! Usunąłem format („woff2”) i usunąłem ostrzeżenia. Dzięki.
duyn9uyen
3

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

Ebrahim
źródło
2

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.

Robert Gowland
źródło
Czy jest na to inny termin? Nie mogę znaleźć tej opcji w żadnym z moich klientów FTP.
Mięsak
Znam tylko terminy BIN i ASCII z przeglądarek linii poleceń * nix. Zakładam, że wielu współczesnych klientów FTP wie, które pliki są binarne, a które nie, więc może to nie jest twój problem. Jeśli chcesz sprawdzić, czy twój klient FTP wysyła w trybie binarnym, użyj FTP do przenoszenia danych binarnych, takich jak .jpg, a następnie spróbuj je wyświetlić. Jeśli został wysłany w trybie ASCII, nie zostanie wyświetlony. (Zobacz jscape.com/blog/… )
Robert Gowland
Ach, dzięki za wyjaśnienie. Wszystkie przesyłane przeze mnie obrazy są w porządku, ostatecznie znalazłem tryb binarny w FileZilla, niestety mi to nie pomogło. Nie mogłem znaleźć opcji w PHP Storm dla plików binarnych, ale jak powiedziałem, obrazy są w porządku, więc domyślam się, że to nie jest problem, który mam.
Mięsak
1

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

U_R_Naveen UR_Naveen
źródło
1
jak to zrobić ?
Baim Wrong,
1

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.

MegaMatt
źródło
1

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ął.

Dave Kanter
źródło
1

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.

André C. Andersen
źródło
0

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.

Cleophas Mashiri
źródło
0

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>
Андрей Приймак
źródło
0

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.

Saidmamad
źródło
0

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