Как использовать шрифты 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 и т.д. ответ, который вы получаете от Google API, готов к работе и позволяет вам использовать семейства шрифтов, как обычно.

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

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

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

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

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

Изменить, примечание: если вы имеете дело с «автономным» приложением, вам действительно может потребоваться загрузить шрифты и загрузить их через 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пакета.

Вот два разных способа добавления шрифтов в ваше приложение React.

Добавление локальных шрифтов

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/ )

Если кто-то ищет решение с (.less), попробуйте ниже. Откройте свой основной или общий файл 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;
}

В некоторых случаях ресурс шрифта может быть где-то в каталоге вашего проекта. Так что вы можете загрузить его вот так, используя SCSS

 $list: (
      "Black",
      "BlackItalic",
      "Bold",
      "BoldItalic",
      "Italic",
      "Light",
      "LightItalic",
      "Medium",
      "MediumItalic",
      "Regular",
      "Thin",
      "ThinItalic"
    );
    
    @mixin setRobotoFonts {
      @each $var in $list {
        @font-face {
          font-family: "Roboto-#{$var}";
          src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
        }
      }
    }
@include setRobotoFonts();