Seltsamster Fehler, bei dem Schriften nicht auf Chrom gerendert werden ⇐ HTML

[Anonymous]

Ich habe zwei lokal installierte Schriftarten, die ich in meinem Projekt über die @font-face -Regel verwenden möchte. Wenn ich das Projekt jedoch in meinem Browser öffne, erhalte ich den folgenden Fehler in der Konsole: < /p>

Code: Select all

Failed to load resource: the server responded with a status of 404 (Not Found)
< /code>

Konsolenfehler < /p>
Trotzdem überprüfe ich den Abschnitt < /strong> in Devtools, wenn ich den Abschnitt  in Devtools überprüfe, wird die Schriftart für meine Header ( Recoleta < /strong>) korrekt gerendert, auch wenn es nicht geladen wird. Dies ist verwirrend - wie wird die Schrift angewendet, wenn der Browser es nicht laden kann? angewendet < /strong>. < /p>
 Was ich ausprobiert habe < /h3>

  Verifiziert, dass die Dateipfade korrekt sind. @font-face 

Regel ist ordnungsgemäß geschrieben. Irgendwelche Einblicke, warum dies geschieht und wie ich es beheben kann? Jede Hilfe wäre sehr geschätzt!

Dateistruktur < /p>

Code: Select all

/* RECOLETA FONT */

@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Thin.woff2') format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Light.woff2') format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Medium.woff2') format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-SemiBold.woff2') format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Bold.woff2') format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Recoleta';
src: url('../app/fonts/Recoleta/Recoleta-Black.woff2') format('woff2');
font-weight: 900;
font-style: normal;
}

/* KINDSANS FONT */

@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansThin-930828392.woff2')
format('woff2');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansLight-930828394.woff2')
format('woff2');
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansSemilight-930828396.woff2')
format('woff2');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansRegular-930828398.woff2')
format('woff2');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansMedium-930828400.woff2')
format('woff2');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansSemibold-930828402.woff2')
format('woff2');
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansBold-930828404.woff2')
format('woff2');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansHeavy-930828406.woff2')
format('woff2');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'kind_sans';
src: url('../app/fonts/Kind_Sans/KindSansBlack-930828408.woff2')
format('woff2');
font-weight: 900;
font-style: normal;
}

h1,
h2,
h3 {
font-family: Recoleta, serif;
font-weight: 600;
margin-top: 0;
}

p {
margin-top: 0;
font-family: kind_sans, sans-serif;
font-weight: 400;
}

Versucht mit lokal installierten Schriftarten, aber Browser wird nicht eine davon