Come utilizzare i caratteri di Google in React.js?

Avevo creato un sito web con React.js e webpack .

Voglio usare i caratteri di Google nella pagina web, quindi inserisco il link nella sezione.

Google Fonts

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

E imposta CSS

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

Comunque, non funziona.

Come posso risolvere questo problema?

In una sorta di file CSS principale o di primo caricamento, basta fare:

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

Non è necessario inserire alcun tipo di @ font-face, ecc. La risposta che ricevi dall'API di Google è pronta per l'uso e ti consente di utilizzare le famiglie di caratteri come al solito.

Quindi nel JavaScript della tua app React principale, in alto metti qualcosa come:

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

Quello che ho fatto in realtà è stato app.cssimportare un fonts.csscon alcune importazioni di caratteri. Semplicemente per organizzazione (ora so dove sono tutti i miei caratteri). La cosa importante da ricordare è che importi prima i caratteri.

Tieni presente che qualsiasi componente che importi nella tua app React dovrebbe essere importato dopo l'importazione dello stile. Soprattutto se questi componenti importano anche i propri stili. In questo modo puoi essere sicuro dell'ordine degli stili. Questo è il motivo per cui è meglio importare i caratteri nella parte superiore del file principale (non dimenticare di controllare il file CSS finale in bundle per ricontrollare se hai problemi).

Ci sono alcune opzioni che puoi passare l'API di Google Font per essere più efficiente durante il caricamento dei caratteri, ecc. Consulta la documentazione ufficiale: Inizia con l'API di Google Fonts

Modifica, nota: se hai a che fare con un'applicazione "offline", potresti effettivamente aver bisogno di scaricare i caratteri e caricarli tramite Webpack.

Caratteri Google in React.js?

Apri il tuo foglio di stile, ad esempio app.css, style.css (che nome hai), non importa, apri il foglio di stile e incolla questo codice

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

e non dimenticare di cambiare l'URL del tuo carattere che desideri, altrimenti funziona bene

e usalo come:

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

Se stai utilizzando l'ambiente Crea app React, aggiungi semplicemente la regola @import a index.css come tale:

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

Importa index.css nella tua app React principale:

import './index.css'

React ti offre una scelta di stili in linea, moduli CSS o componenti stilizzati per applicare CSS:

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

dovresti vedere questo 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']
  }
});

Ho appena provato questo metodo e posso dire che funziona molto bene;)

Nel tuo file CSS, come App.css in un'app create-react, aggiungi un'importazione di fontface. Per esempio:

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

Quindi aggiungi semplicemente il carattere all'elemento DOM all'interno dello stesso file css.

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

Ha avuto lo stesso problema. Si scopre che stavo usando "invece di '.

utilizzare in @import url('within single quotes');questo modo

non @import url("within double quotes");così

Ho aggiunto @import e @ font-face nel mio file css e ha funzionato.

Un'altra opzione per tutte le buone risposte qui è il pacchetto npm react-google-font-loader, che si trova qui .

L'utilizzo è semplice:

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

// Somewhere in your React tree:

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

Quindi puoi semplicemente usare il nome della famiglia nel tuo CSS:

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

Disclaimer: sono l'autore del react-google-font-loaderpacchetto.

Se qualcuno cerca una soluzione con (.less) prova di seguito. Apri il tuo file less principale o comune e usa come sotto.

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

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

Esso potrebbe essere il tag di auto-chiusura del link alla fine, provare:

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

e nel tuo file main.css prova:

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

Ecco due modi diversi per aggiungere caratteri alla tua app React.

Aggiunta di caratteri locali

1. Crea una nuova cartella chiamata fontsnella tua srccartella.

2. Scarica localmente i caratteri di Google e inseriscili nella fontscartella.

3. Apri il tuo index.cssfile e includi il carattere facendo riferimento al percorso.

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

Qui ho aggiunto un Rajdhanifont.

Ora possiamo usare il nostro font in classi CSS come questa.

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

Aggiunta di caratteri Google

Se ti piace usare i caratteri di Google (api) invece dei caratteri locali, puoi aggiungerlo in questo modo.

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

Allo stesso modo, puoi anche aggiungerlo all'interno del index.htmlfile usando linktag.

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

(originariamente pubblicato su https://reactgo.com/add-fonts-to-react-app/ )