Самая странная ошибка, когда шрифты не были отображаются на хроме ⇐ CSS

[Anonymous]

У меня есть два локально установленных шрифта, которые я пытаюсь использовать в своем проекте через правило @font-face . Однако, когда я открываю проект в своем браузере, я получаю следующую ошибку в консоли: < /p>

Код: Выделить всё

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

console error < /p>
Несмотря на это, когда я проверяю раздел  < /strong> в Devtools, шрифт для моих заголовков ( Recoleta < /strong>) выводится правильно, хотя он предположительно не загружается. Это сбивает с толку - как применяется шрифт, если браузер не может его загрузить? Применяется < /strong>. < /p>
 то, что я попробовал < /h3>

[*]  проверил, что пути файла правильны. @font-face 

правило правильно написано.

Очищен кэш и пробовал разные браузеры. Любые понимания того, почему это происходит и как его разрешить? Любая помощь будет очень признателен!

Код: Выделить всё

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

Пробовал с использованием локально установленных шрифтов, но браузер не будет отображать один из них

Подробнее здесь: https://stackoverflow.com/questions/794 ... -on-chrome