Comment utiliser les polices Google dans React.js?

J'avais construit un site Web avec React.js et webpack .

Je veux utiliser les polices Google dans la page Web, j'ai donc mis le lien dans la section.

Polices Google

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

Et définissez CSS

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

Cependant, cela ne fonctionne pas.

Comment puis-je résoudre ce problème?

Dans une sorte de fichier CSS principal ou de premier chargement, faites simplement:

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

Vous n'avez pas besoin d'envelopper une sorte de @ font-face, etc. la réponse que vous obtenez de l'API de Google est prête à l'emploi et vous permet d'utiliser des familles de polices comme d'habitude.

Ensuite, dans le JavaScript de votre application React principale, en haut, mettez quelque chose comme:

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

Ce que j'ai fait en fait, app.cssc'est un qui a importé un fonts.cssavec quelques importations de polices. Simplement pour l'organisation (maintenant je sais où se trouvent toutes mes polices). La chose importante à retenir est que vous importez d'abord les polices.

Gardez à l'esprit que tout composant que vous importez dans votre application React doit être importé après l'importation du style. Surtout si ces composants importent également leurs propres styles. De cette façon, vous pouvez être sûr de l'ordre des styles. C'est pourquoi il est préférable d'importer les polices en haut de votre fichier principal (n'oubliez pas de vérifier votre fichier CSS final pour vérifier si vous rencontrez des problèmes).

Il y a quelques options que vous pouvez passer à l'API Google Font pour être plus efficace lors du chargement des polices, etc. Voir la documentation officielle: Premiers pas avec l'API Google Fonts

Modifier, note: Si vous avez affaire à une application "hors ligne", vous devrez peut-être en effet télécharger les polices et les charger via Webpack.

Polices Google dans React.js?

Ouvrez votre feuille de style, c'est-à-dire app.css, style.css (quel nom vous avez), peu importe, ouvrez simplement la feuille de style et collez ce code

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

et n'oubliez pas de changer l'URL de votre police que vous voulez, sinon cela fonctionne bien

et utilisez ceci comme:

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

Si vous utilisez l'environnement Create React App, ajoutez simplement la règle @import à index.css en tant que telle:

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

Importez index.css dans votre application React principale:

import './index.css'

React vous offre un choix de styles en ligne, de modules CSS ou de composants stylisés afin d'appliquer le CSS:

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

vous devriez voir ce tutoriel: 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']
  }
});

J'ai juste essayé cette méthode et je peux dire qu'elle fonctionne très bien;)

Dans votre fichier CSS, tel que App.css dans une application create-react-app, ajoutez une importation de fontface. Par exemple:

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

Ensuite, ajoutez simplement la police à l'élément DOM dans le même fichier css.

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

Eu le même problème. Il s'avère que j'utilisais "au lieu de '.

utiliser @import url('within single quotes');comme ça

pas @import url("within double quotes");comme ça

J'ai ajouté le @import et le @ font-face dans mon fichier css et cela a fonctionné.

Une autre option pour toutes les bonnes réponses ici est le package npm react-google-font-loader, trouvé ici .

L'utilisation est simple:

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

// Somewhere in your React tree:

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

Ensuite, vous pouvez simplement utiliser le nom de famille dans votre CSS:

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

Avertissement: je suis l'auteur du react-google-font-loaderpackage.

Si quelqu'un cherche une solution avec (.less), essayez ci-dessous. Ouvrez votre fichier principal ou moins commun et utilisez comme ci-dessous.

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

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

Cela pourrait être la balise à fermeture automatique du lien à la fin, essayez:

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

et dans votre fichier main.css, essayez:

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

Voici deux façons différentes d'ajouter des polices à votre application React.

Ajout de polices locales

1. Créez un nouveau dossier appelé fontsdans votre srcdossier.

2. Téléchargez les polices google localement et placez-les dans le fontsdossier.

3. Ouvrez votre index.cssfichier et incluez la police en référençant le chemin.

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

Ici, j'ai ajouté une Rajdhanipolice.

Maintenant, nous pouvons utiliser notre police dans des classes css comme celle-ci.

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

Ajout de polices Google

Si vous aimez utiliser des polices google (api) au lieu de polices locales, vous pouvez l'ajouter comme ceci.

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

De même, vous pouvez également l'ajouter à l'intérieur du index.htmlfichier à l'aide de linktag.

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

(publié à l'origine sur https://reactgo.com/add-fonts-to-react-app/ )