Как мне получить загруженные шрифты Google для работы над проектом, загружаемым с помощью приложения create-response-app?

Question

У меня проблемы с настройкой моего проекта на использование загруженных шрифтов Google. Я работаю с проектом, созданным приложением create-response-app, с Sass в качестве моего препроцессора. Структура проекта представлена ​​на скриншоте по ссылке. Папки стилей и шрифтов находятся непосредственно в родительской папке sr c. Хотя, очевидно, это не то же самое, я получил его с аналогичной структурой для работы над проектом, созданным Vue -CLI, но по какой-то причине он не работает с React.

Я попытался изменить sr c url ('../../fonts/' приводит к сбою сервера, т.е. файл не найден), но ничего не работает. Что дает?

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

Файл типографики

@font-face {
  font-family: 'Montserrat';
  src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Regular.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Bold.ttf') format('opentype');
}

@font-face {
  font-family: 'Montserrat';
  font-weight: 100;
  src: local('Montserrat'), url('/fonts/montserrat/Montserrat-Thin.ttf') format('opentype');
}

Файл записи стилей (SASS)

@import 'utils/typography';
@import 'utils/variables';
@import 'utils/functions';
@import 'utils/mixins';

@import 'base';

Скриншот структуры проекта

Answer 1

вы можете добавить это в index.html:

<link href="https://fonts.googleapis.com/css?family=Lato:400,700&display=swap" rel="stylesheet">

заменить Lato любым шрифтом Google

, тогда он будет доступен в вашем проекте для использования