web-dev-qa-db-fra.com

Comment utiliser les polices Google dans React.js?

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

Je souhaite utiliser les polices Google dans la page Web, je mets donc le lien dans la section.

Google Fonts

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

Et mettre CSS

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

Cependant, ça ne marche pas.

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

reactjswebpackgoogle-font-api
64
Kevin Hsiao

Dans une sorte de fichier CSS principal ou de premier chargement, il suffit de faire:

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

Vous n'avez pas besoin de mettre @ 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 React application JavaScript principale, mettez en haut quelque chose comme:

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

Ce que j'ai réellement fait est devenu un app.css qui a importé un fonts.css avec quelques importations de polices. Simplement pour l'organisation (maintenant je sais où sont toutes mes polices). La chose importante à retenir est que vous importez d'abord les polices.

N'oubliez pas que tout composant que vous importez dans votre application React devrait ê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 fourni pour vérifier si vous rencontrez des problèmes).

Vous pouvez utiliser l'API de polices de Google pour gagner en efficacité lors du chargement de polices, etc. Voir la documentation officielle: Initiation à l'API de polices de Google

Modifier, remarque: Si vous utilisez une application "hors ligne", vous devrez peut-être télécharger les polices et les charger via Webpack.

48
Tom

Google polices dans React.js?

Ouvrez votre feuille de style i.e, app.css, style.css (quel nom vous avez), peu importe, ouvrez simplement 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 ça va

et l'utiliser comme:

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

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

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

Importer index.css dans votre application principale React:

import './index.css'

React vous donne le choix entre un style en ligne, des modules CSS ou des composants stylés pour appliquer le CSS:

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

Dans votre fichier CSS, tel que App.css dans une application créer-réagir, 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;
}
5
mrdougwright

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 que ça marche très bien;)

4
aldobsom

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

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

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

4
Deke

J'ai ajouté le @import et le @ font-face dans mon fichier CSS et cela a fonctionné . enter image description here

2
Heather Akpan

Une autre option pour toutes les bonnes réponses ici est le paquet 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;
}

Disclaimer: Je suis l'auteur du paquetage react-google-font-loader.

1
Jake Taylor

Ce 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;
}
0
rupert