Como usar as fontes do Google no React.js?

96

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?

Kevin Hsiao
fonte
1
Você coloca o <link>no cabeçalho da página, não em seu aplicativo de reação, correto? Você especifica font-familyqualquer outro lugar em sua folha de estilo ou em seus elementos diretamente?
Timo
Você está usando https e tem uma política de segurança em vigor?
Stuart
Na verdade, eu sei qual é o método correto de importar Google Fonts. Acho que preciso de um exemplo simples. Você pode me ajudar ...
Kevin Hsiao
como é a sua redução de preço? você está definindo outros estilos que podem substituir aquele mais genérico?
manonthemat
Eu tinha resolvido esse problema ... O método que tentei antes estava errado. Este é o método correto. Usando Google Fonts localmente (em hjs-webpack e React) No entanto, ainda há alguns erros no processo do webpack. Esses dois códigos de linha devem ser escritos no arquivo webpack.config.js . { test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
Kevin Hsiao

Respostas:

83

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.

Tom
fonte
você pode explicar por que a maneira de usar o link no cabeçalho html não funciona?
doobean
58

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;
}
Rizo
fonte
Não é melhor carregar as fontes com JS? Quero dizer, por motivos de desempenho.
Simon Franzen
você pode explicar por que a maneira de usar o link no cabeçalho html não funciona?
doobean
21

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;
Max
fonte
11

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

Aldobsom
fonte
8

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;
}
Mrdougwright
fonte
3
É @ font-face se você quiser fazer isso e não é necessário com a API Font do Google.
Tom
Mas e se você quiser definir suas fontes em um arquivo css, porque é onde elas pertencem? Mas você ainda quer aproveitar a hospedagem do Google? Não é necessário então, ou existe uma maneira melhor?
pedra de
5

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

Deke
fonte
2

Eu adicionei o @import e o @ font-face no meu arquivo css e funcionou.insira a descrição da imagem aqui

Heather Akpan
fonte
1
você não precisa de ambas para as fontes do Google, apenas @importdeve bastar stackoverflow.com/questions/48057801/…
Luciano
2

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.

Jake Taylor
fonte
1

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;
}
Jaison
fonte
0

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;
}
Rupert
fonte
0

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

Saigowthamr
fonte