Реагировать JS добавить локальный шрифт

Question

Я хочу добавить пользовательский шрифт, который находится на моем локальном компьютере, я добавил шрифт в src/fonts/ сам файл шрифта с именем DIN Next LT Arabic Regular.ttf.

Я нашел, что один из ответов предполагает, чтоЯ должен изложить это так и добавить эту строку в мой index.css файл

@font-face {
  font-family: 'DIN Next LT Arabic Regular' !important;
  src: local('DIN Next LT Arabic Regular'), url('./fonts/DIN Next LT Arabic Regular.ttf') format('truetype');
}

, а затем импортировать index.css в мой index.js, что уже было выполнено командой create-react-app.

Но это не работает, и я понятия не имею, почему.

PS: у меня есть файл .env, который содержит эту строку NODE_PATH=src/, чтобы не использовать относительный путь.

Answer 1

Вы можете использовать «Web Font Loader» для импорта шрифта в ваше реактивное приложение, поэтому вы можете установить этот инструмент, используя

npm install webfontloader --save

Это всего лишь пример:

1- В вашем public / index.html скопируйте ссылку шрифта

2- Затем откройте src / index.js и добавьте:

import WebFont from 'webfontloader';

  WebFont.load({

    google: {
      families: ['Droid Sans', 'Droid Serif']

     }});

Answer 2

Эта проблема может возникать из-за проблем поддержки и / или совместимости (IE: что работает в браузере x может не работать в браузере y).

Что если браузервы используете, не поддерживает этот конкретный формат шрифта?

Хотя я обычно рекомендую использовать (бесплатный) сервис, такой как Google Fonts , чтобы получитьШрифты, бывают случаи, когда вам нужно размещать и загружать свои собственные шрифты, поэтому я думаю, что вам лучше использовать FontSquirrel's Web-Font Generator , это сервис, который позволяет вам загружать .ttf файли создайте пакет веб-шрифта (папка .zip, содержащая все различные форматы шрифтов).

Он также предоставляет вам файл CSS, который (правильно) связывает все различные форматы шрифтов, обеспечивая надлежащую поддержкуВы можете узнать больше о Font Squirrel на их блоге .

ПРИМЕЧАНИЕ: Я не связан и не работаю для Google Fonts или Font Squirrelпростодовольный пользователь обеих услуг.