Comment utiliser les polices Google dans React.js?

96

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?

Kevin Hsiao
la source
1
Vous mettez le <link>dans l' en-tête de la page, pas dans votre application React, n'est-ce pas? Spécifiez-vous le font-familyn'importe où ailleurs dans votre feuille de style ou directement sur vos éléments?
Timo
Utilisez-vous https et avez-vous une politique de sécurité en place?
Stuart
En fait, je sais quelle est la bonne méthode pour importer des polices Google. Je pense que j'ai besoin d'un exemple simple. Pouvez-vous m'aider ...
Kevin Hsiao
à quoi ressemble votre démarque? définissez-vous d'autres styles qui pourraient remplacer celui plus générique?
manonthemat
J'avais résolu ce problème ..... La méthode que j'ai essayée avant était fausse. C'est la méthode correcte. Utiliser Google Fonts localement (dans hjs-webpack et React) Cependant, il y a encore des erreurs dans le processus webpack. Ces deux lignes de code doivent être écrites dans le fichier 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

Réponses:

83

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.

À M
la source
pouvez-vous s'il vous plaît expliquer pourquoi la manière d'utiliser le lien dans la tête html ne fonctionne pas?
doobean le
58

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;
}
Rizo
la source
N'est-il pas préférable de charger les polices avec JS? Je veux dire pour des raisons de performance.
Simon Franzen
pouvez-vous s'il vous plaît expliquer pourquoi la manière d'utiliser le lien dans la tête html ne fonctionne pas?
doobean le
21

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;
Max
la source
11

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

aldobsom
la source
8

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;
}
mrdougwright
la source
3
C'est @ font-face si vous vouliez faire cela et ce n'est pas nécessaire avec l'API Font de Google.
Tom
Mais que faire si vous souhaitez définir vos polices dans un fichier css, car c'est là qu'elles appartiennent? Mais vous souhaitez toujours tirer parti de l'hébergement de Google? N'est-ce pas nécessaire alors, ou y a-t-il un meilleur moyen?
pierre
5

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

Deke
la source
2

J'ai ajouté le @import et le @ font-face dans mon fichier css et cela a fonctionné.entrez la description de l'image ici

Heather Akpan
la source
1
vous n'avez pas besoin des deux pour les polices google, cela @importdevrait suffire à stackoverflow.com/questions/48057801/...
Luciano
2

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.

Jake Taylor
la source
1

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;
}
Jaison
la source
0

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;
}
Rupert
la source
0

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

saigowthamr
la source