Comment importer une nouvelle police dans un projet - Angular 5

Question

Je veux importer une nouvelle police dans mon projet Angular 5.

J'ai essayé :

1) Copier le fichier dans assets/fonts/

2) l'ajouter à .angular-cli.json styles

mais j'ai vérifié que le fichier n'est pas une .css il s'agit d'un .otf qui fonctionne comme un .exe (c'est un installateur) donc je ne sais pas vraiment comment l'importer. Une idée ?

Answer 1

Vous devez placer les fichiers de police dans le dossier assets (il peut y avoir un sous-dossier fonts dans assets) et y faire référence dans les styles :

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Une fois fait, vous pouvez appliquer cette police où vous voulez :

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

Vous pouvez mettre le @font-face dans votre définition globale styles.css ou styles.scss et vous seriez en mesure de faire référence à la police n'importe où - même dans votre composant CSS/SCSS spécifique. styles.css ou styles.scss est déjà défini dans angular-cli.json . Ou, si vous le souhaitez, vous pouvez créer un fichier CSS/SCSS distinct et le déclarer dans angular-cli.json avec le fichier styles.css ou styles.scss comme :

"styles": [
  "styles.css",
  "fonts.css"
],

Answer 2

Vous pouvez essayer de créer un css pour votre police avec font-face (comme expliqué ici )

Étape 1

Créez un fichier css avec la face de la police et placez-le quelque part, comme dans assets/fonts

customFont.css

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

Étape 2

Ajoutez le css à votre .angular-cli.json (ou .angular.json pour l'angle 6+) dans la styles config

"styles":[
 //...your other styles
 "assets/fonts/customFont.css"
 ]

N'oubliez pas de redémarrer ng serve après avoir fait cela

Étape 3

Utilisez la police dans votre code

composant.css

span {font-family: YourFontFamily; }

Answer 3

La réponse est déjà existante ci-dessus, mais je voudrais ajouter quelque chose vous pouvez spécifier ce qui suit dans votre @font-face

@font-face {
  font-family: 'Name You Font';
  src: url('assets/font/xxyourfontxxx.eot');
  src: local('Cera Pro Medium'), local('CeraPro-Medium'),
  url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
  url('assets/font/xxyourfontxxx.woff') format('woff'),
  url('assets/font/xxyourfontxxx.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

Vous pouvez donc simplement indiquer le nom de la famille de caractères que vous avez déjà choisi.

NOTE : le font-weight et le font-style dépendent de vos fichiers .woff .ttf ...

Answer 4

Si vous utilisez Angular,

Veillez à placer les polices dans votre dossier de ressources.

Beaucoup de personnes qui découvrent Angular pensent qu'il faut les placer ailleurs, mais Angular optimise beaucoup sa prod autour des fichiers du dossier assets.

Answer 5

Vous devrez également mettre à jour votre fichier web.config comme ceci : (choisissez votre type de police)

<system.webServer>
  <staticContent>
    <mimeMap fileExtension=".woff2" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
    <mimeMap fileExtension=".json" mimeType="application/json" />
    <mimeMap fileExtension=".eot" mimeType="application/vnd.ms-fontobject" />
    <mimeMap fileExtension=".ttf" mimeType="application/x-font-truetype" />
    <mimeMap fileExtension=".otf" mimeType="application/x-font-opentype" />
  </staticContent>