Как добавить шрифты для проектов на основе create-react-app?

есть два варианта:

Использование Импорта

это предложенный вариант. Это гарантирует, что ваши шрифты проходят через конвейер сборки, получают хэши во время компиляции, чтобы кэширование браузера работало правильно, и что вы получаете ошибки компиляции, если файлы отсутствуют.

как описано в разделе "добавление таблиц стилей на шрифты", вам нужно иметь файл CSS, импортированный из JS. Например, по умолчанию src/index.js импорт src/index.css:

import './index.css';

такой CSS-файл проходит через конвейер сборки и может ссылаться на шрифты и изображения. Например, если вы поместите шрифт в src/fonts/MyFont.woff ваш index.css может включать в себя следующее:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

обратите внимание, как мы используем относительный путь, начинающийся с ./. Это специальная нотация, которая помогает конвейеру сборки (работает на Webpack) обнаружить этот файл.

обычно этого должно быть достаточно.

используя public Папка

если по какой-то причине вы предпочитаете не чтобы использовать конвейер сборки, а вместо этого сделать это "классическим способом", вы можете использовать public папку и поместить туда ваши шрифты.

недостатком этого подхода является то, что файлы не получают хэши при компиляции для производства, поэтому вам придется обновлять их имена каждый раз, когда вы их меняете, или браузеры будут кэшировать старые версии.

если вы хотите сделать это таким образом, поставить шрифты где-то в , например,public/fonts/MyFont.woff. Если вы следуете этому подходу, вы должны поместить CSS-файлы в public папка также и не импортируйте их из JS, потому что смешивание этих подходов будет очень запутанным. Итак, если вы все еще хотите это сделать, у вас будет файл типа public/index.css. Вам придется вручную добавить <link> к этой таблице стилей от public/index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

и внутри него, вы бы использовали обычный CSS обозначение:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

обратите внимание, как я использую fonts/MyFont.woff как пути. Это потому что index.css находится в public папка, поэтому она будет обслуживаться из общего пути (обычно это корень сервера, но если вы развернете страницы GitHub и установите свой homepage поле в http://myuser.github.io/myproject, он будет подан от /myproject). Однако fonts также в public папка, поэтому они будут обслуживаться из fonts относительно (либо http://mywebsite.com/fonts или http://myuser.github.io/myproject/fonts). Поэтому мы используем относительное путь.

обратите внимание, что поскольку мы избегаем конвейера сборки в этом примере, он не проверяет, что файл действительно существует. Вот почему я не рекомендую этот подход. Еще одна проблема заключается в том, что наши index.css файл не уменьшается и не получает хэш. Таким образом, это будет медленнее для конечных пользователей, и вы рискуете, что браузеры кэшируют старые версии файла.

какой способ использовать?

перейти с первого метода ("Использование импорта"). Я только описал второй, так как это то, что вы пытались сделать (судя по вашему комментарию), но он имеет много проблем и должен быть только последним средством, когда вы работаете над какой-то проблемой.