@font-face, показывающая ошибку 404 для шрифтов, импортированных .woff и .ttf

am, используя шрифт-face для импорта моего настраиваемого веб-шрифта, но шрифты не загружаются в браузеры, он показывает ошибку 404 файла, не найденную в консоли, но мои шрифты находятся в одном каталоге, а имена шрифтов такие же, как я упоминал в font-face

@font-face {
  font-family: 'Proxima Nova';
  src: url("../fonts/proximanova-light-webfont.eot");
  src: url("../fonts/proximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-light-webfont.woff") format("woff"), url("../fonts/proximanova-light-webfont.ttf") format("truetype"), url("../fonts/proximanova-light-webfont.svg#ProximaNovaLight") format("svg");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url("../fonts/proximanova-reg-webfont.eot");
  src: url("../fonts/proximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/proximanova-reg-webfont.woff") format("woff"), url("../fonts/proximanova-reg-webfont.ttf") format("truetype"), url("../fonts/proximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Кроме того, я попытался добавить эти строки в .httaccess, он не работает, и я также просмотрел SO, у кого нет правильного решения, ребята, пожалуйста, помогите мне.

AddType application/vnd.ms-fontobject    .eot
    AddType application/x-font-opentype      .otf
    AddType image/svg+xml                    .svg
    AddType application/x-font-ttf           .ttf
    AddType application/font-woff            .wof

Ответ 1

Работает ли ваш сайт на сервере Windows? Если да, попробуйте добавить правильные типы Mime для расширений шрифтов. Это может быть дубликат: Почему @font-face выбрасывает ошибку 404 для файлов Woff?

Btw, у вас есть опечатка в последнем предложении блока кода AddType в вашем вопросе. Его .woff(2 f).

Ответ 2

Попробуйте следующее:

@font-face {
  font-family: 'Proxima Nova';
  src: url("./fontsproximanova-light-webfont.eot");
  src: url("./fontsproximanova-light-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-light-webfont.woff") format("woff"), url("./fontsproximanova-light-webfont.ttf") format("truetype"), url("./fontsproximanova-light-webfont.svg#ProximaNovaLight") format("svg");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'Proxima Nova';
  src: url("./fontsproximanova-reg-webfont.eot");
  src: url("./fontsproximanova-reg-webfont.eot?#iefix") format("embedded-opentype"), url("./fontsproximanova-reg-webfont.woff") format("woff"), url("./fontsproximanova-reg-webfont.ttf") format("truetype"), url("./fontsproximanova-reg-webfont.svg#ProximaNovaRegular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Директивы AddType предназначены для того, чтобы сервер отправил файлы шрифтов с правильными заголовками MIME-типа (чтобы браузер знал, как их интерпретировать) и не поможет с ошибками 404. 404 указывает мне, что url в CSS неверны.

Сообщите мне, если он работает.

Ответ 3

Я бы просто хотел добавить, поскольку этот вопрос преследовал меня, у Apache есть псевдоним для/icons/как часть/etc/httpd/conf.d/autoindex.conf