Comment ajouter des polices pour créer des projets basés sur react-app?

Il y a deux options:

Utilisation Des Importations

C'est l'option suggérée. Il garantit que vos polices passent par le pipeline de construction, obtiennent des hachages pendant la compilation afin que la mise en cache du navigateur fonctionne correctement, et que vous obtenez des erreurs de compilation si les fichiers sont manquants.

Comme décrit dans "Ajout de feuilles de style sur les polices" , vous devez avoir un fichier CSS importé de JS. Par exemple, par défaut src/index.js importe src/index.css:

import './index.css';

Un fichier CSS comme celui-ci va à travers le pipeline de construction, et peut référencer les polices et les images. Par exemple, si vous mettez une police dans src/fonts/MyFont.woff votre index.css peut inclure ceci:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(./fonts/MyFont.woff) format('woff');
}

Remarquez comment nous utilisons un chemin relatif commençant par ./. Ceci est une notation spéciale qui aide le pipeline de construction (alimenté par Webpack) à découvrir ce fichier.

Normalement, cela devrait suffire.

Utilisation Du Dossier public

Si pour une raison quelconque vous préférez pas utiliser le pipeline de construction, et à la place le faire "Classic way", vous pouvez utiliser le dossier public et y mettre vos polices.

L'inconvénient de cette approche est que les fichiers ne reçoivent pas de hachages lorsque vous compilez pour la production, vous devrez donc mettre à jour leurs noms chaque fois que vous les modifiez, ou les navigateurs mettront en cache les anciennes versions.

Si vous voulez le faire de cette façon, placez les polices quelque part dans le dossier public, par exemple, dans public/fonts/MyFont.woff. Si vous suivez cette approche, vous devez également placer les fichiers CSS dans le dossier public et pas les importer à partir de JS car mélanger ces approches va être très déroutant. Donc, si vous voulez le faire, vous auriez un fichier comme public/index.css. Vous devez ajouter manuellement <link> pour cette feuille de style à partir de public/index.html:

<link rel="stylesheet" href="%PUBLIC_URL%/index.css">

Et à l'intérieur de celui-ci, vous utiliseriez la notation CSS régulière:

@font-face {
  font-family: 'MyFont';
  src: local('MyFont'), url(fonts/MyFont.woff) format('woff');
}

Remarquez comment j'utilise {[17] } comme chemin. C'est parce que index.css est dans le dossier public donc il sera servi à partir du chemin public (généralement c'est la racine du serveur, mais si vous déployez sur les Pages GitHub et définissez votre champ homepage sur http://myuser.github.io/myproject, Il sera servi à partir de /myproject). Cependant fonts, sont également dans le public dossier, de sorte qu'ils seront servis à partir de fonts relativement (soit http://mywebsite.com/fonts ou http://myuser.github.io/myproject/fonts). Par conséquent, nous utilisons le chemin relatif.

Notez que puisque nous évitons le pipeline de construction dans cet exemple, il ne vérifie pas que le fichier existe réellement. C'est pourquoi je ne recommande pas cette approche. Un autre problème est que notre fichier index.css n'est pas minifié et ne obtenez une table de hachage. Donc, cela va être plus lent pour les utilisateurs finaux, et vous risquez que les navigateurs mettent en cache les anciennes versions du fichier.

Quelle façon D'utiliser?

Allez avec la première méthode ("Utilisation des importations"). J'ai seulement décrit le second puisque c'est ce que vous avez essayé de faire (à en juger par votre commentaire), mais il a beaucoup de problèmes et ne devrait être que le dernier recours lorsque vous travaillez autour d'un problème.