Importation de polices dans une application angulaire

Question

J'essaye d'importer la police "Montserrat" dans mon projet Angular4 mais elle se réinitialise simplement au standard.

Voici mon style.css

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

.fancyFont {
  font-family: 'Montserrat';
}

Et mon ami.component.html

<p class="fancyFont">Look at my Fanciness</p>

css angular fonts webfonts

2

Reed 13 sept. 2017 à 23:28

Answer 1

Je l'ai compris.

J'ai importé les polices de google comme ceci:

@import url("https://fonts.googleapis.com/css?family=Montserrat:500,700");

Ce qui comprend deux poids différents, 500 et 700. En indiquant au CSS le poids de police que je voulais utiliser, il a commencé à fonctionner.

.fancyFont {
  font-family: 'Montserrat';
  font-weight: 500;
}

3

Reed 14 sept. 2017 à 13:28

Answer 2

Voici la façon dont la police awesome a ajouté des polices dans le fichier scss. Peut-être que vous devez envisager cette façon de faire cela.

@font-face {
  font-family: 'FontAwesome';
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
  src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
    url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
    url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
    url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
    url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
//  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
  font-weight: normal;
  font-style: normal;
}

0

Aniruddha Das 13 sept. 2017 à 20:44

Importation de polices dans une application angulaire

2 réponses

De nouvelles questions

css