Como usar as fontes do Google no React.js?

Eu construí um site com React.js e webpack .

Quero usar fontes do Google na página da web, então coloco o link na seção.

Fontes do Google

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

E definir CSS

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

No entanto, não funciona.

Como posso resolver esse problema?

Em algum tipo de arquivo CSS principal ou de carregamento inicial, basta fazer:

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

Você não precisa envolver em nenhum tipo de @ font-face, etc. a resposta que você recebe da API do Google está pronta para uso e permite que você use famílias de fontes normalmente.

Em seguida, no JavaScript do aplicativo React principal, na parte superior coloque algo como:

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

O que eu fiz na verdade foi um app.cssque importei fonts.csscom algumas importações de fontes. Simplesmente para organização (agora eu sei onde estão todas as minhas fontes). O importante a lembrar é que você importa as fontes primeiro.

Lembre-se de que qualquer componente importado para o aplicativo React deve ser importado após a importação do estilo. Especialmente se esses componentes também importarem seus próprios estilos. Dessa forma, você pode ter certeza da ordem dos estilos. É por isso que é melhor importar as fontes no topo do seu arquivo principal (não se esqueça de verificar o seu arquivo CSS final para verificar novamente se você está tendo problemas).

Existem algumas opções que você pode passar pela API de fontes do Google para ser mais eficiente ao carregar fontes, etc. Consulte a documentação oficial: Comece a usar a API de fontes do Google

Editar, nota: se você estiver lidando com um aplicativo "offline", talvez precise baixar as fontes e carregá-las por meio do Webpack.

Fontes do Google em React.js?

Abra sua folha de estilo, ou seja, app.css, style.css (qual nome você tem), não importa, apenas abra a folha de estilo e cole este código

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

e não se esqueça de alterar o URL da sua fonte que você deseja, caso contrário, funcionará bem

e use isso como:

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

Se você estiver usando o ambiente Create React App, basta adicionar a regra @import a index.css como tal:

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

Importe index.css em seu aplicativo React principal:

import './index.css'

O React oferece a opção de estilo inline, módulos CSS ou componentes estilizados para aplicar CSS:

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

você deve ver este tutorial: 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']
  }
});

Acabei de experimentar este método e posso dizer que funciona muito bem;)

Em seu arquivo CSS, como App.css em um create-react-app, adicione uma importação de fontface. Por exemplo:

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

Em seguida, basta adicionar a fonte ao elemento DOM dentro do mesmo arquivo css.

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

Tive o mesmo problema. Acontece que eu estava usando em "vez de '.

usar @import url('within single quotes');assim

não @import url("within double quotes");gosto disso

Eu adicionei o @import e o @ font-face no meu arquivo css e funcionou.

Outra opção para todas as boas respostas aqui é o pacote npm react-google-font-loader, encontrado aqui .

O uso é simples:

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

// Somewhere in your React tree:

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

Em seguida, você pode simplesmente usar o sobrenome em seu CSS:

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

Isenção de responsabilidade: eu sou o autor do react-google-font-loaderpacote.

Se alguém está procurando uma solução com (.less) tente abaixo. Abra seu arquivo principal ou menos comum e use como abaixo.

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

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

Ele poderia ser o tag de fecho automático de link no final, tente:

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

e em seu arquivo main.css tente:

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

Aqui estão duas maneiras diferentes de adicionar fontes ao seu aplicativo react.

Adicionando fontes locais

1. Crie uma nova pasta chamada fontsem sua srcpasta.

2. Baixe as fontes do google localmente e coloque-as dentro da fontspasta.

3. Abra seu index.cssarquivo e inclua a fonte referenciando o caminho.

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

Aqui eu adicionei uma Rajdhanifonte.

Agora, podemos usar nossa fonte em classes css como esta.

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

Adicionar fontes do Google

Se você gosta de usar fontes google (api) em vez de fontes locais, pode adicioná-las assim.

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

Da mesma forma, você também pode adicioná-lo dentro do index.htmlarquivo usando a linktag.

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

(postado originalmente em https://reactgo.com/add-fonts-to-react-app/ )