Як використовувати шрифти Google у React.js?

Я створив веб-сайт з React.js та webpack .

Я хочу використовувати шрифти Google на веб-сторінці, тому я розміщую посилання у розділі.

Шрифти Google

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">

І встановіть CSS

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

Однак це не працює.

Як я можу вирішити цю проблему?

У якомусь головному чи першому завантажувальному CSS-файлі просто виконайте:

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

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

Потім у вашому головному додатку React JavaScript вгорі помістіть щось на кшталт:

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

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

Майте на увазі, що будь-який компонент, який ви імпортуєте в додаток React, повинен бути імпортований після імпорту стилю. Особливо, якщо ці компоненти також імпортують свої власні стилі. Таким чином ви можете бути впевнені в упорядкуванні стилів. Ось чому найкраще імпортувати шрифти у верхній частині основного файлу (не забудьте перевірити остаточний пакетний CSS-файл, щоб перевірити, чи є у вас проблеми).

Існує кілька варіантів, за допомогою яких можна передати API шрифтів Google для підвищення ефективності завантаження шрифтів тощо. Дивіться офіційну документацію: Почніть роботу з API шрифтів Google.

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

Шрифти Google у React.js?

Відкрийте таблицю стилів, тобто app.css, style.css (яке ім’я у вас є), неважливо, просто відкрийте таблицю стилів і вставте цей код

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

і не забудьте змінити потрібну вам URL-адресу шрифту, інакше добре працюючи

і використовувати це як:

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

Якщо ви використовуєте середовище 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;

ви повинні побачити цей підручник: 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']
  }
});

Я щойно спробував цей метод і можу сказати, що він працює дуже добре;)

Додайте до файлу CSS, наприклад App.css, у програмі create-response-app імпорт шрифту. Наприклад:

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

Потім просто додайте шрифт до елемента DOM у тому ж файлі css.

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

Мав те саме питання. Виявляється, я використовував "замість цього '.

використання @import url('within single quotes'); так

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

Я додав @import та @ font-face у свій файл css, і він спрацював.

Іншим варіантом усіх хороших відповідей тут є пакет npm 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пакету.

Якщо хтось шукає рішення з (.less), спробуйте нижче. Відкрийте свій основний або звичайний файл меншого розміру та використовуйте як нижче.

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

body{
  font-family: "Open Sans", sans-serif;
}

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

<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet"/> 

і у вашому файлі main.css спробуйте:

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

Ось два різні способи додавання шрифтів у ваш додаток реагування.

Додавання локальних шрифтів

1. Створіть fontsу своїй srcпапці нову папку.

2. Завантажте шрифти Google локально та розмістіть їх усередині fontsпапки.

3. Відкрийте свій index.cssфайл і додайте шрифт, посилаючись на шлях.

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

Тут я додав Rajdhaniшрифт.

Тепер ми можемо використовувати наш шрифт у таких класах css.

.title{
    font-family: Rajdhani, serif;
    color: #0004;
}

Додавання шрифтів Google

Якщо ви хочете використовувати шрифти google (api) замість локальних шрифтів, можете додати їх так.

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');

Так само ви можете додати його всередину index.htmlфайлу за допомогою linkтегу.

<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">

(спочатку розміщено на веб- сайті https://reactgo.com/add-fonts-to-react-app/ )