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

105

Я создал сайт с React.js и webpack .

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

Google шрифты

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

И установите CSS

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

Однако это не работает.

Как я могу решить эту проблему?

Кевин Сяо
источник
1
Вы помещаете <link>в заголовок страницы, а не в свое приложение для реагирования, верно? Указываете ли вы font-familyгде-нибудь еще в таблице стилей или непосредственно в элементах?
Timo
Вы используете https, и у вас есть политика безопасности?
Стюарт
На самом деле, я знаю, как правильно импортировать шрифты Google. Думаю, мне нужен простой пример. Вы можете мне помочь ...
Кевин Сяо
как выглядит ваша уценка? вы определяете другие стили, которые могут перезаписать более общий?
manonthem
Я решил эту проблему ..... Метод, который я пробовал раньше, был неправильным. Это правильный метод. Использование Google Fonts локально (в hjs-webpack и React) Однако в процессе webpack все еще есть некоторые ошибки. Эти две строки кода должны быть записаны в файле webpack.config.js . { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
Кевин Сяо

Ответы:

88

В каком-то основном или первом загружаемом файле 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.

Том
источник
1
не могли бы вы объяснить, почему способ использования ссылки в заголовке html не работает?
doobean
64

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

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

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

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

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

body {
  font-family: 'Josefin Sans', cursive;
}
Ризо
источник
Не лучше ли загружать шрифты с помощью JS? Я имею в виду соображения производительности.
Саймон Франзен
не могли бы вы объяснить, почему способ использования ссылки в заголовке html не работает?
doobean
22

Если вы используете среду 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;
Максимум
источник
13

вы должны увидеть это руководство: 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']
  }
});

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

альдобсом
источник
10

В вашем файле 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;
}
Мрдуграйт
источник
3
Это @ font-face, если вы хотите это сделать, и это не обязательно с Google Font API.
Том
Но что, если вы хотите определить свои шрифты в файле css, потому что они принадлежат ему? Но вы все еще хотите воспользоваться хостингом Google? Разве это не нужно, или есть способ лучше?
камень
6

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

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

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

Deke
источник
3

Я добавил @import и @ font-face в свой файл css, и это сработало.введите описание изображения здесь

Хизер Акпан
источник
1
вам не нужны оба для шрифтов Google, просто @importдолжно хватить stackoverflow.com/questions/48057801/…
Лучиано
3

Еще один вариант для всех хороших ответов - это пакет 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пакета.

Джейк Тейлор
источник
3

Вот два разных способа добавления шрифтов в ваше приложение 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/ )

Saigowthamr
источник
1

Если кто-то ищет решение с (.less), попробуйте ниже. Откройте свой основной или общий файл less и используйте, как показано ниже.

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

body{
  font-family: "Open Sans", sans-serif;
}
Джейсон
источник
0

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

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

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

body,div {
  font-family: 'Bungee Inline', cursive;
}
Руперт
источник
0

В некоторых случаях ресурс шрифта может быть где-то в каталоге вашего проекта. Так что вы можете загрузить его вот так, используя 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();
Декстера
источник