Importation de police personnalisée dans Angular4

Question

J'utilise Angular4 et j'ai un problème avec l'utilisation de ma police personnalisée. J'ai essayé d'utiliser font-face mais cela me donne l'erreur indiquant que le fichier de police ne peut pas être trouvé. Que dois-je faire pour inclure ce fichier afin de pouvoir l'utiliser dans mon composant?

@font-face {
  font-family: 'lcd-plain';
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.eot'); /* Pour IE */
  src: url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.ttf') format('truetype'), /* Pour Chrome et Safari */
  url('/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.woff') format('woff'); /* Pour FireFox */
  /*format("truetype"), url("/simaxx-front-end/src/main/webapp/src/assets/fonts/lcd-plain/lcd-plain.svg#LCD")*/
  /*format("svg");*/
}

svg.gauge {
  font-family: 'lcd-plain', Helvetica, Arial, sans-serif;
}

Answer 1

Je crois que le problème réside dans la façon dont Angular remanie les chemins dans les composants.

Ce que je fais habituellement, c'est créer un dossier "font" sous src et y mettre mes polices. Ensuite, je crée un dossier "styles" pour mes styles personnalisés où je mets un font.scss avec ce qui suit :

$archistico-woff-font-path: "./fonts/archistico_bold-webfont.woff";
$archistico-woff2-font-path: "./fonts/archistico_bold-webfont.woff2";
$font-family-brand: 'archisticobold';

Dans mon dossier src, il y a un styles.scss. J'importe mon fonts.scss et déclare ma police là-bas

@import "./src/styles/fonts";
@font-face {
    font-family: 'archisticobold';
    src:url($archistico-woff2-font-path) format('woff2'),
        url($archistico-woff-font-path) format('woff');
    font-weight: normal;
    font-style: normal;
}

J'espère que cela aide

Answer 2

Il y a la propriété src, qui peut être une URL vers un emplacement de fichier de police distant ou le nom d'une police sur l'ordinateur de l'utilisateur. Donc, si vous servez votre dossier de ressources en tant que fichiers statiques et que vous avez le dossier des polices là-dedans, vous devriez être en mesure de faire référence aux fichiers de police relativement à l'URL de votre application comme ceci :

@font-face {
  font-family: 'lcd-plain';
  src: url('/fonts/lcd-plain/lcd-plain.ttf') format('truetype'),
}