Comment utiliser les polices Google dans React.js ?

Question

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

Je veux utiliser Polices de caractères Google dans la page web, donc j'ai mis le lien dans la section.

Google Fonts

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

Et définir CSS

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

Cependant, cela ne fonctionne pas.

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

Answer 1

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

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

Vous n'avez pas besoin d'inclure une quelconque @font-face, etc. La réponse que vous recevez de l'API de Google est prête à l'emploi et vous permet d'utiliser les familles de polices comme d'habitude.

Ensuite, dans votre JavaScript principal de l'application React, en haut, mettez quelque chose comme :

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

Ce que j'ai fait en fait, c'est que j'ai fait un app.css qui a importé un fonts.css avec quelques importations de polices. Tout simplement pour des raisons d'organisation (je sais maintenant où se trouvent toutes mes polices). Ce qu'il faut retenir, c'est qu'il faut d'abord importer 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 groupé final pour revérifier si vous avez 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 : Démarrez avec l'API Google Fonts

Modification, remarque : si vous avez affaire à une application "hors ligne", il se peut que vous deviez effectivement télécharger les polices et les charger via Webpack.

Answer 2

Les polices Google dans React.js ?

Ouvrez votre feuille de style, c'est-à-dire app.css, style.css (quel que soit le nom que vous avez), cela n'a pas d'importance, 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 la police que vous voulez, sinon tout fonctionne bien.

et l'utiliser comme :

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

Answer 3

Si vous utilisez l'environnement Create React App, ajoutez simplement la règle @import à index.css comme tel :

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

Importation index.css dans votre application React principale :

import './index.css'

React vous donne le choix entre le style en ligne, les modules CSS et les composants stylisés pour appliquer le CSS :

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

Answer 4

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

Je viens d'essayer cette méthode et je peux dire qu'elle fonctionne très bien ;)

Answer 5

Dans votre fichier CSS, tel que App.css dans un create-react-app, ajoutez un import fontface. Par exemple :

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

Il suffit ensuite d'ajouter la police à l'élément DOM dans le même fichier css.

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