Wie importiere ich eine externe Schriftart in Angular 4 Projekt?

Question

Ich habe styles.less in der Wurzel meiner ng Projekt, wo ich eine Google-Schrift am Import:

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic'); 

Aber der Fehler auftritt:

Failed to compile. 

./node_modules/css-loader?{"sourceMap":false,"importLoaders":1}!./node_modules/postcss-loader?{"ident":"postcss"}!./node_modules/less-loader/dist/cjs.js?{"sourceMap":false}!./src/styles.less 
Module build failed: 

@import url('https://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=cyrillic'); 

^ 
Can't resolve './https://fonts.googleapis.com/cssfamily=PT+Sans:400,700&subset=cyrillic' in 'C:\apps-dev\ldrm\src' in C:\apps-dev\ldrm\src\styles.less (line 1, column 0) 

@./src/styles.less 4:14-187 

@multi ./src/styles.less 

Answer 1

Angular auf diesen Aufruf "./" hinzufügt. Siehe here den Grund dafür.

Sie haben 2 Möglichkeiten:

1. umfassen die Schriftart in Ihrer index.html

2. Download Schriftart, legen Sie sie in den Ordner Assets und es so nennen:

   @font-face { 
       font-family: 'your-font-family'; 
       src: url('/assets/fonts/your-donwloaded-font-1'), 
        url('/assets/fonts/your-donwloaded-font-2'); 
   } 
   

Answer 2

Sie können diesen Weg versuchen:

@chosen-font: 'PT Sans'; 
@chose-font-escaped: escape(@chosen-font); 
@import url('https://fonts.googleapis.com/css?family=@{chose-font-escaped}:400,700&subset=cyrillic');