Полностью включить веб-шрифт Google в сборку create-реакции-приложения (без извлечения)

Question

Мне нужно включить веб-шрифт Google в сборку веб-приложения React с использованием приложения create-реагировать.Это потому, что приложение будет обслуживаться по Wi-Fi без доступа в Интернет.Наиболее простым решением кажется google-fonts-webpack-plugin , но для него требуется настроенная конфигурация webpack.

Есть ли какое-либо "простое" решение, которое загружает и включает в себя всересурсы веб-шрифтов автоматически, без необходимости извлекать из create-реагировать-приложение?

Answer 1

Есть несколько способов сделать это.

1.Импорт шрифта

Например, для использования Roboto, выполните

yarn add typeface-roboto

или

npm install typeface-roboto --save

В index.js:

import "typeface-roboto";

Тамявляются пакетами npm для многих шрифтов с открытым исходным кодом и большинства шрифтов Google.Вы можете увидеть все шрифты здесь .Все пакеты из этого проекта .

2.Загрузите шрифт вручную и добавьте его в таблицу стилей

Шрифты можно загрузить с fonts.google.com

Теперь вы можете поместить шрифт в src/fonts/Lato.woff и использовать его в index.css.

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

Для шрифта ttf вы должны указать truetype вместо ttf какпараметр в формате

Вы можете импортировать его в index.js, чтобы сделать его доступным

import './index.css';

Вы можете сделать это также в App.css, App.js.Это твои предпочтения.