Come utilizzare i caratteri di Google in React.js?


96

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?


1
L'hai inserita <link>nell'intestazione della pagina, non nella tua app React, giusto? Specifichi direttamente font-familyqualsiasi altro posto nel tuo foglio di stile o sui tuoi elementi?
Timo

Stai utilizzando https e disponi di una politica di sicurezza?
Stuart

In realtà, so qual è il metodo corretto per importare Google Fonts. Penso di aver bisogno di un semplice esempio. Puoi aiutarmi ...
Kevin Hsiao

che aspetto ha il tuo ribasso? stai definendo altri stili che potrebbero sovrascrivere quello più generico?
manonthemat

Avevo risolto questo problema ..... Il metodo che ho provato prima era sbagliato. Questo è il metodo corretto. Utilizzo di Google Fonts localmente (in hjs-webpack e React) Tuttavia, ci sono ancora alcuni errori nel processo webpack. Queste due righe di codice dovrebbero essere scritte nel file 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

Risposte:


83

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.


puoi per favore spiegare perché il modo di usare il link in html head non funziona?
doobean

58

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

Non è meglio caricare i caratteri con JS? Intendo per motivi di perfomance.
Simon Franzen

puoi per favore spiegare perché il modo di usare il link in html head non funziona?
doobean

21

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;


8

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

3
È @ font-face se vuoi farlo e non è necessario con l'API Font di Google.
Tom

Ma cosa succede se vuoi definire i tuoi caratteri in un file css, perché è lì che appartengono? Ma vuoi ancora sfruttare l'hosting di Google? Non è quindi necessario o c'è un modo migliore?
pietra

5

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ì



2

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.


1

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

0

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

0

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

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.