web-dev-qa-db-fra.com

Comment ajouter des polices pour créer des projets basés sur une application?

J'utilise create-react-app et préfère ne pas eject.

Il n'est pas clair où les polices importées via @ font-face et chargées localement devraient aller. 

À savoir, je charge

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('MYRIADPRO-REGULAR.woff') format('woff');
}

Aucune suggestion?

-- MODIFIER

Y compris le Gist auquel Dan fait référence dans sa réponse

➜  Client git:(feature/trivia-game-ui-2) ✗ ls -l public/static/fonts
total 1168
-rwxr-xr-x@ 1 maximveksler  staff  62676 Mar 17  2014 MYRIADPRO-BOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  61500 Mar 17  2014 MYRIADPRO-BOLDCOND.woff
-rwxr-xr-x@ 1 maximveksler  staff  66024 Mar 17  2014 MYRIADPRO-BOLDCONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  66108 Mar 17  2014 MYRIADPRO-BOLDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  60044 Mar 17  2014 MYRIADPRO-COND.woff
-rwxr-xr-x@ 1 maximveksler  staff  64656 Mar 17  2014 MYRIADPRO-CONDIT.woff
-rwxr-xr-x@ 1 maximveksler  staff  61848 Mar 17  2014 MYRIADPRO-REGULAR.woff
-rwxr-xr-x@ 1 maximveksler  staff  62448 Mar 17  2014 MYRIADPRO-SEMIBOLD.woff
-rwxr-xr-x@ 1 maximveksler  staff  66232 Mar 17  2014 MYRIADPRO-SEMIBOLDIT.woff
➜  Client git:(feature/trivia-game-ui-2) ✗ cat src/containers/GameModule.css
.GameModule {
  padding: 15px;
}

@font-face {
  font-family: 'Myriad Pro Regular';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Regular'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-REGULAR.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-COND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Semibold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Semibold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-SEMIBOLD.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-CONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed Italic';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed Italic'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCONDIT.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold Condensed';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold Condensed'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLDCOND.woff') format('woff');
}

@font-face {
  font-family: 'Myriad Pro Bold';
  font-style: normal;
  font-weight: normal;
  src: local('Myriad Pro Bold'), url('%PUBLIC_URL%/static/fonts/MYRIADPRO-BOLD.woff') format('woff');
}
cssreactjsfontswebpackcreate-react-app
81
Maxim Veksler

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 génération, obtiennent des hachages lors de la compilation afin que la mise en cache du navigateur fonctionne correctement et que vous obteniez des erreurs de compilation si les fichiers sont manquants.

Comme décrit dans «Ajout d’images, de polices et de fichiers» }, vous devez importer un fichier CSS à partir de JS. Par exemple, par défaut src/index.js imports src/index.css:

import './index.css';

Un fichier CSS comme celui-ci passe par le pipeline de génération et peut faire référence à des polices et des images. Par exemple, si vous mettez une police dans src/fonts/MyFont.woff, votre index.css pourrait 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 ./. Il s'agit d'une notation spéciale qui aide le pipeline de construction (optimisé par Webpack) à découvrir ce fichier.

Normalement, cela devrait suffire.

Utilisation du dossier public

Si, pour une raison quelconque, vous préférez utiliser pas le pipeline de génération et que vous le fassiez de manière «classique», vous pouvez utiliser le dossier public et y placer vos polices.

L’inconvénient de cette approche est que les fichiers ne sont pas hachés lors de la compilation pour la production. Vous devrez donc mettre à jour leur nom chaque fois que vous les modifiez, sinon les navigateurs mettront en cache les anciennes versions.

Si vous souhaitez procéder de cette manière, placez les polices quelque part dans le dossier public, par exemple dans public/fonts/MyFont.woff. Si vous suivez cette approche, vous devriez également placer les fichiers CSS dans le dossier public et les importer not à partir de JS, car le mélange de ces approches sera très déroutant. Donc, si vous voulez toujours le faire, vous aurez un fichier du type public/index.css. Vous devez ajouter manuellement <link> à cette feuille de style à partir de public/index.html:

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

Et à l'intérieur, vous utiliseriez la notation CSS habituelle:

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

Remarquez comment j'utilise fonts/MyFont.woff comme chemin. En effet, index.css étant dans le dossier public, il sera servi à partir du chemin public (généralement, il s’agit de la racine du serveur, mais si vous effectuez un déploiement sur GitHub Pages et définissez votre champ homepage sur http://myuser.github.io/myproject, il sera servi à partir de /myproject. Cependant, fonts sont également dans le dossier public et seront donc servis à partir de fonts relativement (http://mywebsite.com/fonts ou http://myuser.github.io/myproject/fonts). Nous utilisons donc 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 ni minified ni hash. Cela va donc être plus lent pour les utilisateurs finaux et les navigateurs risquent de mettre en cache les anciennes versions du fichier.

 Quelle manière d'utiliser?

Allez avec la première méthode (“Utilisation des importations”). J’ai seulement décrit le second problème depuis ce que vous avez essayé de faire (à en juger par votre commentaire), mais cela pose de nombreux problèmes et ne devrait être que le dernier recours lorsque vous travaillez sur un problème.

168
Dan Abramov

Voici quelques façons de le faire:

1. Importation de police

Par exemple, pour utiliser Roboto, installez le paquet en utilisant

yarn add typeface-roboto

ou

npm install typeface-roboto --save

Dans index.js:

import "typeface-roboto";

Il existe des packages npm pour de nombreuses polices Open Source et la plupart des polices Google. Vous pouvez voir toutes les polices ici . Tous les paquets proviennent de ce projet .

2. Pour les polices hébergées par un tiers

Par exemple, les polices Google, vous pouvez aller à fonts.google.com où vous pouvez trouver des liens que vous pouvez insérer dans votre public/index.html

 screenshot of fonts.google.com

Ça va être comme

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

ou 

<style>
    @import url('https://fonts.googleapis.com/css?family=Montserrat');
</style>

3. Utiliser le paquet web-font-loader

Installer le paquet en utilisant

yarn add webfontloader

ou

npm install webfontloader --save

Dans src/index.js, vous pouvez importer ceci et spécifier les polices nécessaires

import WebFont from 'webfontloader';

WebFont.load({
   google: {
     families: ['Titillium Web:300,400,700', 'sans-serif']
   }
});
3
sudo bangbang

Vous pouvez utiliser le module WebFont , ce qui simplifie grandement le processus.

render(){
  webfont.load({
     custom: {
       families: ['MyFont'],
       urls: ['/fonts/MyFont.woff']
     }
  });
  return (
    <div style={your style} >
      your text!
    </div>
  );
}
1
Delfino
  1. Accéder à Google Fonts https://fonts.google.com/
  2. Sélectionnez votre police comme indiqué dans l'image ci-dessous: 

 enter image description here

  1. Copiez puis collez cette URL dans un nouvel onglet, vous obtiendrez le code CSS pour ajouter cette police. Dans ce cas si vous allez à

https://fonts.googleapis.com/css?family=Spicy+Rice

Il va s'ouvrir comme ça:

 enter image description here

4, copiez et collez ce code dans votre style.css et commencez simplement à utiliser cette police de la manière suivante:

      <Typography
          variant="h1"
          gutterBottom
          style={{ fontFamily: "Spicy Rice", color: "pink" }}
        >
          React Rock
        </Typography>

Résultat:

 enter image description here

0
Hitesh Sahu

Je faisais des erreurs comme ça.

@import "https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext";
@import "https://use.fontawesome.com/releases/v5.3.1/css/all.css";

Cela fonctionne correctement de cette façon

@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i&amp;subset=cyrillic,cyrillic-ext,latin-ext);
@import url(https://use.fontawesome.com/releases/v5.3.1/css/all.css);
0
Yasin UYSAL