Как использовать шрифты Google в React.js?

Ответ 1

В какой-то основной или первой загрузке CSS файла просто выполните:

@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');

Вам не нужно переносить какие-либо @font-face и т.д. ответ, который вы получите от Google API, готов к работе и позволяет использовать семейства шрифтов, как обычно.

Затем в вашем главном приложении React JavaScript поместите что-то вроде:

import './assets/css/fonts.css';

На самом деле я сделал app.css, который импортировал fonts.css с несколькими импортами шрифтов. Просто для организации (теперь я знаю, где все мои шрифты). Важно помнить, что сначала вы импортируете шрифты.

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

Есть несколько вариантов, которые вы можете передать через Google Font API, чтобы повысить эффективность загрузки шрифтов и т.д. См. официальную документацию: Начало работы с Google Fonts API

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

Ответ 2

Google шрифты в React.js?

Откройте вашу таблицу стилей, т.е. app.css, style.css (какое у вас имя), это не имеет значения, просто откройте таблицу стилей и вставьте этот код

@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

и не забудьте изменить URL вашего шрифта, который вы хотите, иначе работает нормально

и используйте это как:

body {
  font-family: 'Josefin Sans', cursive;
}

Ответ 3

Если вы используете среду Create React App, просто добавьте правило @import в index.css следующим образом:

@import url('https://fonts.googleapis.com/css?family=Anton');

Импортируйте index.css в ваше основное приложение React:

import './index.css'

React предоставляет вам выбор встроенных стилей, модулей CSS или стилевых компонентов для применения CSS:

font-family: 'Anton', sans-serif;

Ответ 4

Вы должны увидеть этот учебник: https://scotch.io/@micwanyoike/how-to-add-fonts-to-a-react-project

import WebFont from 'webfontloader';

WebFont.load({
  google: {
    families: ['Titillium Web:300,400,700', 'sans-serif']
  }
});

Я только что попробовал этот метод, и я могу сказать, что он работает очень хорошо;)

Ответ 5

В свой CSS файл, такой как App.css в приложении create-реагировать на приложение, добавьте импорт шрифта. Например:

@fontface {
  font-family: 'Bungee Inline', cursive;
  src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}

Затем просто добавьте шрифт к элементу DOM в том же файле CSS.

body {
  font-family: 'Bungee Inline', cursive;
}

Ответ 6

Была такая же проблема. Оказывается, я использовал " вместо '.

используйте @import url('within single quotes'); как это

не @import url("within double quotes"); как это

Ответ 7

Я добавил @import и @font-face в мой файл CSS, и это сработало.

Ответ 8

Еще один вариант для всех хороших ответов здесь - это пакет npm response react-google-font-loader, найденный здесь.

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

import GoogleFontLoader from 'react-google-font-loader';

// Somewhere in your React tree:

<GoogleFontLoader
    fonts={[
        {
            font: 'Bungee Inline',
            weights: [400],
        },
    ]}
/>

Тогда вы можете просто использовать фамилию в своем CSS:

body {
    font-family: 'Bungee Inline', cursive;
}

Отказ от ответственности: я являюсь автором react-google-font-loader.

Ответ 9

Это может быть самозакрывающийся тег ссылки в конце, попробуйте:

<link href="#" onclick="location.href='https://fonts.googleapis.com/css?family=Bungee+Inline'; return false;" rel="stylesheet"/> 

и в файле main.css попробуйте:

body,div {
  font-family: 'Bungee Inline', cursive;
}