У меня есть шрифт, который не будет загружать в любом месте , но на локальном хосте в Chrome. Когда я загружаю файлы на живой сервер или открываю localhost в другом браузере, например Safari, он не загружается.
Пример: С левой стороны находится Chromeна локальном хосте справа находится Safari на локальном хосте.
Я уже десятки раз просматривал свой код, проверил правильность структуры моего файла, снова загрузил шрифты, чтобы проверить, не были ли они повреждены,и убедился, что мое семейство шрифтов совпадает.
Файлы:
_fontface.scss
@font-face {
font-family: "Ortica-Light";
src:
local("Ortica-Light"),
url("/src/styles/fonts/Ortica-Light.woff2") format("woff2"),
url("/src/styles/fonts/Ortica-Light.woff") format("woff"),
url("/src/styles/fonts/Ortica-Light.ttf") format("ttf"),
url("/src/styles/fonts/Ortica-Light.otf") format("opentype");
font-weight: normal;
font-style: normal;
}
_typography.scss
$headings: "Ortica-Light";
h1, h2, h3 {
font-family: $headings; //"Ortica-Light"
font-weight: normal;
}
base.scss
@import "_fontface.scss";
Структура файла
src
├ components
└ styles
├ _fontface.scss
├ _typography.scss
├ base.scss
└ fonts
├ Ortica-Light.otf
├ Ortica-Light.ttf
├ Ortica-Light.woff
└ Ortica-Light.woff2
Когда я захожу в другой браузер и открываю localhost или открываю живую ссылку в любом браузере (включая Chrome) и открываю DevTools, чтобы проверить файлы, которые я получаю файлов шрифтов, которые не похожи на шрифт .