Как правильно загружать шрифты

Question

У меня проблема с импортом шрифтов в мое приложение. Я пытался это, но это не работает IDK, почему это не работает или что-то пошло не так.

Вот мой файл scss:

@font-face {
  font-family: "OpenSansBold";
  font-style: normal;
  font-weight: 800;

  src: url("../../webfonts/opensans/OpenSans-ExtraBold.eot");
  src: url("../../webfonts/opensans/OpenSans-ExtraBold.eot?#iefix") format("embedded-opentype"),
  url("../../webfonts/opensans/OpenSans-ExtraBold.woff2") format("woff2"),
  url("../../webfonts/opensans/OpenSans-ExtraBold.woff") format("woff"),
  url("../../webfonts/opensans/OpenSans-ExtraBold.svg#OpenSansExtrabold") format("svg");
}

А вот моя файловая структура:

И консоль дает мне ниже:

Failed to decode downloaded font: http://localhost/webfonts/opensans/OpenSans-ExtraBold.woff2
(index):1 OTS parsing error: invalid version tag
(index):1 Failed to decode downloaded font: http://localhost/webfonts/opensans/OpenSans-ExtraBold.woff
(index):1 OTS parsing error: invalid version tag

Что я сделал не так?

Answer 1

Попробуйте этот код. Я думаю, это поможет вам

@font-face {
      font-family: 'OpenSansBold';
      src: url('../webfonts/opensans/OpenSans-ExtraBold.eot');
      src: local('☺'), url('../webfonts/opensans/OpenSans-ExtraBold.woff') format('woff'), url('../webfonts/opensans/OpenSans-ExtraBold.ttf') format('truetype'), url('../webfonts/opensans/OpenSans-ExtraBold.svg') format('svg');
      font-style: normal;
      font-weight: 800;
    }