Материал2: Как переопределить шрифт Roboto в компонентах Material2

Question

Вместо этого я хотел бы использовать Lato. Я попытался добавить его в index.html и styles.css, но не работает.

Answer 1

У меня такая же проблема @kyw. Единственный способ в настоящее время - переопределить шрифт в каждом компоненте, где это необходимо.

После добавления этого заменить некоторые шрифты в компонентах:

html * { 
    font-family: "lato", sans-serif; 
    font-style: normal; 
    font-weight: 400; 
} 

Надеюсь кто-нибудь может дать нам лучший намек.

Answer 2

Лучший способом я нашел, чтобы предназначаться все угловые Материал 2 селекторов, как показано ниже:

body [class^='mat-'], body [class*=' mat-'] { 
    font-family: "lato"; 
} 

Это происходит потому, что угловые 2 компонентов все имеют класс, начиная с 'mat-.

Answer 3

Создайте свой собственный файл SCSS и определить семейство шрифтов, как этот

@import '~@angular/material/theming'; 
$custom-typography: mat-typography-config(
    $font-family: 'Lato' 
); 

@include mat-core($custom-typography); 

проверил Typography Customization