Herunterladen der heruntergeladenen Schriftart fehlgeschlagen

Dies ist ein Fehler, den ich in Chrome erhalte und dessen Suche leider nicht viele Ergebnisse gebracht hat. Die Schriftart selbst wird korrekt angezeigt. Ich erhalte jedoch immer noch diesen Fehler / diese Warnung. Genauer gesagt ist dies die vollständige Warnung:

"Fehler beim Dekodieren der heruntergeladenen Schriftart: http: // localhost: 8000 / app / fonts / Lato / "

Mein CSS sind diese:

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

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

Ich verstehe es einfach nicht. Die Schriftart wird korrekt angewendet, aber die Warnung ist immer da. Beim Versuch, Sans-Serifdie Schriftart zu verwenden, wird die normale Browser-Schriftart wiederhergestellt, so dass dies möglicherweise der Fall ist, aber ich bin mir nicht sicher, und selbst nach der Suche habe ich nichts gefunden. Vielen Dank!

BEARBEITEN

Es gibt verschiedene Schriftdateien, alle aus derselben Familie. Ich versuche sie alle zu laden. Die Schriftdateien sind .ttf. Ich bin sich von einem lokalen Ordner laden, und es gibt verschiedene Schriftart-Dateien, wie Lato-Black.ttf, Lato-Bold.ttf, Lato-Italic.ttfusw.

In der CSS-Regel müssen Sie die Erweiterung der Datei hinzufügen. Dieses Beispiel mit der tiefstmöglichen Unterstützung:

@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 */
}

BEARBEITEN:

"Heruntergeladene Schriftart konnte nicht dekodiert werden" bedeutet, dass die Schriftart beschädigt oder unvollständig ist (fehlende Metriken, erforderliche Tabellen, Namensdatensätze, eine Million möglicher Dinge).

Manchmal wird dieses Problem durch die Schriftart selbst verursacht. Die Google-Schriftart bietet die richtige Schriftart, die Sie benötigen. Wenn jedoch eine Schriftart erforderlich ist, verwende ich Transfonter , um das gesamte Schriftformat zu generieren.

Manchmal ist es der FTP-Client, der die Datei beschädigt (in diesem Fall nicht, weil er sich auf einem lokalen PC befindet). Stellen Sie sicher, dass Sie die Datei binär und nicht in ASCII übertragen.

In Visual Studio ist ein ähnliches Problem aufgetreten, das durch einen falschen url()Pfad zur betreffenden Schriftart verursacht wurde.

Ich habe diesen Fehler nach dem Ändern nicht mehr erhalten (zum Beispiel):

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

dazu:

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

Der Wechsel vom Format ('woff') zum Format ('font-woff') hilft mir, dieses Problem gerade jetzt zu lösen.

Ändern Sie hier einfach eine kleine Änderung von Germano Plebani Antwort

 @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 */
}

Bitte überprüfen Sie, ob Ihre Browserquellen es öffnen können und welcher Typ es ist

Stellen Sie sicher, dass Ihr Server die Schriftdateien mit der richtigen MIME / dem richtigen Typ sendet .

Ich habe kürzlich das gleiche Problem mit Nginx, weil einige Mime-Typen in der Vanilla- /etc/nginx/mime.typesDatei fehlen .

Ich habe das Problem behoben, indem ich die fehlenden MIME-Typen an der Stelle hinzugefügt habe, an der ich sie benötigt habe:

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

Sie können dies auch überprüfen, um die Datei mime.types in nginx zu erweitern: Erweiterung der Standarddatei nginx mime.types

Ich musste type="text/css"meinem Link-Tag hinzufügen . Ich habe es geändert von:

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

zu:

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

Nachdem ich es geändert hatte, verschwand der Fehler.

Ich hatte nur das gleiche Problem und löste es durch Ändern

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

zu

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

Bei mir trat dieser Fehler auf, als ich mit https auf eine Google-Schriftart verwies. Als ich zu http wechselte, verschwand der Fehler. (und ja, ich habe es mehrmals versucht, um zu bestätigen, dass dies die Ursache war)

Also habe ich mich verändert:

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

Zu:

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

Manchmal tritt dieses Problem auf, wenn Sie die Schriftarten mit der falschen FTP-Methode hochladen / herunterladen. Schriftarten müssen mit der Binärmethode FTP-bearbeitet werden, nicht mit ASCII. (Abhängig von Ihrer Stimmung kann es sich nicht intuitiv anfühlen, lol). Wenn Sie die Schriftdateien mit der ASCII-Methode ftp, erhalten Sie diese Fehlermeldung. Wenn Sie Ihre Dateien mit einer 'Auto'-Methode ftp und diese Fehlermeldung erhalten, versuchen Sie, die binäre Methode durch ftp zu erzwingen.

Ich hatte das gleiche Problem mit font awesome v4.4 und habe es behoben, indem ich das woff2-Format entfernt habe. Ich habe nur in Chrome eine Warnung erhalten.

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

In meinem Fall wurde es mit einer falschen Pfaddatei in .htaccess verursacht. Bitte überprüfen Sie die Richtigkeit Ihres Dateipfads.

Für mich war der Fehler zu vergessen, FTP vor dem Hochladen der Schriftdateien in den Binärmodus zu versetzen.

Bearbeiten

Sie können dies testen, indem Sie andere Arten von Binärdaten wie Bilder hochladen. Wenn sie auch nicht angezeigt werden, liegt dies möglicherweise an Ihrem Problem.

Ich hatte auch das gleiche Problem, aber ich habe es gelöst, indem ich 'Content-Type' hinzugefügt habe: 'application / x-font-ttf' im Antwortheader für alle .ttf-Dateien

In meinem Fall wurde dies durch das Erstellen einer SVN-Patch-Datei verursacht, die das Hinzufügen der Schriftdateien umfasste. Wie so:

1. Fügen Sie dem subversionierten Trunk Schriftdateien aus dem lokalen Dateisystem hinzu
2. Kofferraum funktioniert wie erwartet
3. Erstellen Sie einen SVN-Patch mit Trunk-Änderungen, um das Hinzufügen von Schriftdateien einzuschließen
4. Wenden Sie den Patch auf einen anderen Zweig an
5. Schriftdateien werden dem subversionierten Zweig hinzugefügt (und können festgeschrieben werden), sind jedoch beschädigt, was zu Fehlern im OP führt.

Die Lösung bestand darin, die Schriftdateien von meinem lokalen Dateisystem direkt in den Zweig hochzuladen. Ich gehe davon aus, dass dies passiert ist, weil SVN-Patch-Dateien alles in das ASCII-Format konvertieren müssen und nicht unbedingt Binärdateien für Schriftdateien beibehalten müssen. Aber das ist nur eine Vermutung.

In meinem Fall - mit React with Gatsby - wurde das Problem behoben, indem alle meine Pfade überprüft wurden. Ich habe React / Gatsby mit Sass verwendet und die Gatsby-Quelldateien suchten die Schriftarten an einer anderen Stelle als die kompilierten Dateien. Nachdem ich die Dateien in jeden Pfad dupliziert hatte, war dieses Problem behoben.

In meinem Fall waren die Schriftdateien beim Herunterladen einer Vorlage nur leere Dateien. Wahrscheinlich ein Problem mit dem Download. Chrome hat diesen generischen Fehler darüber ausgegeben. Ich dachte zuerst, die Lösung des Wechsels von woffzu font-woffgelöst, aber es brachte Chrome nur dazu, die Schriftarten zu ignorieren. Meine Lösung bestand darin, die Schriftarten einzeln zu finden und herunterzuladen / zu ersetzen.

Wenn Sie Express verwenden, müssen Sie das Bereitstellen statischer Inhalte zulassen, indem Sie Folgendes hinzufügen: var server = express (); server.use (express.static ('./ public')); // wobei public der App-Stammordner mit den darin enthaltenen Schriftarten auf jeder Ebene ist, dh public / fonts oder public / dist / fonts ... // Wenn Sie connect verwenden, suchen Sie bei Google nach einer ähnlichen Konfiguration.

Ich verwende .Net Framework 4.5 / IIS 7

Um das Problem zu beheben, habe ich die Datei Web.config in einen Ordner mit einer Schriftartdatei gelegt.

Inhalt von Web.config:

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

Für mich war es ein Problem mit lfs-Dateien, die nicht heruntergeladen wurden

git lfs fetch --all

Das Problem wurde behoben.

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

Wenn es sich auf dem Server befindet (nicht in localhost), versuchen Sie, die Schriftarten manuell hochzuladen, da manchmal der FTP-Client (z. B. FileZilla) die Dateien beschädigt und das Problem verursachen kann. Für mich habe ich manuell über die Cpanel-Oberfläche hochgeladen.

Mein Fall sah ähnlich aus, aber die Schrift war beschädigt (und daher nicht zu dekodieren). Es wurde durch die Konfiguration in Maven verursacht. Das Hinzufügen von nonFilteredFileExtension für Font-Erweiterungen in maven-resources-pluginhat mir geholfen:

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