Импортировать локальный шрифт в проект create-реагировать-приложение

Я создал приложение React, используя create-react-app, и решил не извлекать его. В настоящее время я пытаюсь импортировать локальный шрифт с помощью @font-face, но мне это не удается.

Это моя текущая структура папок:

/
+ public/
+ src/
-- index.js
-- App.js
-- App.css
++ assets/
+++ css/
---- general.css
+++ fonts/
---- CircularStd-Medium.woff

На App.js я импортирую general.css файл (import './assets/css/general.css';).

В файле general.css я устанавливаю @font-face, как описано ниже:

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

Я уже пытался выполнить этот ответ, но это не сработало. Код компилируется, но появляется простой шрифт Times New Roman.


reactjs create-react-app fonts css
person Minoru    schedule 18.06.2018    source источник

Ответы (2)


arrow_upward
5
arrow_downward

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

require('./fonts/circular-std-master/css/circular-std.css');

Проверьте мой репо для кода;)

https://github.com/maltenz/malte/tree/master/src/Router

person Malte Schulze-Boeing    schedule 23.06.2018
comment
Лол, даже я импортирую тот же шрифт в 2019 году - person Rajendran Nadar; 04.03.2019
comment
Эта страница репо недоступна @Malte Schulze-Boeing - person Rahman Haroon; 01.03.2021

arrow_upward
1
arrow_downward

Я храню свои локальные шрифты в /public/fonts, а в таблице стилей (я использую sass) URL-адрес, который выбрал шрифты, /fonts/myfont Обратите внимание на / в начале.

То же самое для изображений, на которые есть ссылки в таблице стилей (/img/myimage).

person j0nd0n7    schedule 13.11.2018